快捷導(dǎo)航

vue基于html2canvas和jspdf?生成pdf?、解決jspdf中文亂碼問(wèn)題的方法詳解

更新時(shí)間：2023年06月09日 09:10:06 作者：無(wú)知的小菜雞

這篇文章主要介紹了vue基于html2canvas和jspdf?生成pdf?、解決jspdf中文亂碼問(wèn)題的方法,結(jié)合實(shí)例形式詳細(xì)描述了中文亂碼問(wèn)題的原因、解決方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下

html2canvas

html2canvas文檔

備注：以下內(nèi)容都是基于官方文檔

簡(jiǎn)介

該腳本允許您直接在用戶(hù)瀏覽器上對(duì)網(wǎng)頁(yè)或其部分進(jìn)行“截圖”。屏幕截圖基于 DOM，因此可能不是 100% 準(zhǔn)確到真實(shí)表示，因?yàn)樗粫?huì)制作實(shí)際的屏幕截圖，而是根據(jù)頁(yè)面上可用的信息構(gòu)建屏幕截圖。

安裝及使用

npm install html2canvas
import html2canvas from 'html2canvas';
html2canvas(el,options).then(function(canvas) {
    document.body.appendChild(canvas);
});

el 是要生成canvas的dom對(duì)象，
options是配置項(xiàng)，常用的配置項(xiàng)有：backgroundColor（背景色，默認(rèn)白色）、
width（寬度）、height（高度）、useCORS（是否嘗試使用 CORS 從服務(wù)器加載圖像）、
canvas（canvas對(duì)象用作繪圖基礎(chǔ)的現(xiàn)有元素）

參考文章：html2canvas使用筆記

示例

下面的例子基于Vue

<template>
    <div>
        <div ref="a">
            <img src="./image/aa.webp" />
            <p>一張?zhí)评哮唸D片</p>
        </div>
        <el-button type="primary" @click="createCanvas">html轉(zhuǎn)canvas</el-button>
        <div ref="b">
            <p>這里放生成的canvas</p>
        </div>
    </div>
</template>
<script>
import html2canvas from 'html2canvas';
export default {
    methods: {
        createCanvas() {
            // dom元素
            let dom = this.$refs.a;
            // 寬高
            let width = dom.offsetWidth;
            let height = dom.offsetHeight;
            // 生成一個(gè)canvas對(duì)象
            let canvas = document.createElement('canvas');
            // 設(shè)置canvas的寬高
            canvas.width = width * 2;
            canvas.height = height * 2;
            // 生成頁(yè)面模糊時(shí)，可以放大一定倍數(shù)，通過(guò)調(diào)整canvas的寬高使其清晰度增加
            const context = canvas.getContext('2d');
            context.scale(1.5, 1.5);
            // 配置項(xiàng)
            let options = {
                backgroundColor: '#ffffff',
                canvas: canvas,
                useCORS: true
            };
            // 容器
            let container = this.$refs.b;
            // 生成canvas并插入到容器里
            html2canvas(dom,options).then(canvas => {
                container.appendChild(canvas);
            });
        }
    }
};
</script>
<style scoped lang="scss">
</style>

效果圖
在這里插入圖片描述

jspdf

JSPDF API官方文檔

基礎(chǔ)語(yǔ)法

new jsPDF(orientation, unit, format) → {jsPDF}

orientation：方向，默認(rèn)p(豎直方向)，可選l(橫向)

unit：?jiǎn)挝?，指定坐?biāo)時(shí)要使用的測(cè)量單位。“pt”（點(diǎn)）、“mm”（默認(rèn)）、“cm”、“in”之一

format ：應(yīng)該是紙張格式，默認(rèn)a4

常用方法

文本

text(text, x, y, flags) → {jsPDF}
text:文本內(nèi)容
x,y  文本相對(duì)于頁(yè)面左上角的偏移量
flags：具體是干啥的不填清楚，可以不用填

// 生成文本
createText() {
    let doc = new JsPdf();
    doc.text('aaa',100,100);
    // 保存成pdf文件
    doc.save('a.pdf');
}

下面是生成的pdf文件
在這里插入圖片描述
關(guān)于中文亂碼問(wèn)題

查了一下官網(wǎng)，官網(wǎng)內(nèi)容如下（官網(wǎng)是英文的，用谷歌翻譯，翻譯了一下）

jspdf git地址
在這里插入圖片描述
官網(wǎng)里提供的那個(gè)地址不太好使，我這里把代碼下到了本地。找到下面的這個(gè)html文件

點(diǎn)擊打開(kāi)，可以看到下面的網(wǎng)站

上傳一個(gè)ttf的字體文件，會(huì)生成一個(gè)js文件。然后將文件引入到頁(yè)面里

import './hyjt-normal';
// 添加并設(shè)置字體
console.log(doc.getFontList());
doc.setFont('hyjt');

doc.getFontList() 用于獲取當(dāng)前支持那些字體，doc.setFont(); 設(shè)置字體，值一定要與你上面填的名一致，打開(kāi)這個(gè)js文件可以看到：
在這里插入圖片描述
示例：

// 生成文本
createText() {
    let doc = new JsPdf();
    // 添加并設(shè)置字體
    console.log(doc.getFontList());
    doc.setFont('hyjt');
    doc.text('哈哈哈',100,100);
    // 保存成pdf文件
    doc.save('a.pdf');
}

在這里插入圖片描述
文本顏色

setTextColor(r, g, b)
// rgb 顏色值（0~255）

添加新頁(yè)面和設(shè)置指針?biāo)陧?yè)數(shù)

//添加新頁(yè)面
addPage()
//設(shè)置當(dāng)前焦點(diǎn)在第幾頁(yè)
setPage(number)

示例：

// 生成文本
createText() {
    let doc = new JsPdf();
    doc.setFont('hyjt');
    doc.addPage();
    doc.text('I am on page 2', 10, 10);
    doc.setPage(1);
    doc.text('I am on page 1', 10, 10);
    // 保存成pdf文件
    doc.save('a.pdf');
}

說(shuō)一下流程：默認(rèn)內(nèi)容會(huì)在第一頁(yè)，執(zhí)行addPage()后會(huì)生成新的一頁(yè)，焦點(diǎn)跳到第二頁(yè)，I am on page 2 會(huì)在第二頁(yè)里生成；執(zhí)行setPage(1) ，焦點(diǎn)跳轉(zhuǎn)到第一頁(yè)，I am on page 1會(huì)在第一頁(yè)里生成

設(shè)置字體大小

setFontSize(number)

保存pdf

save(filename)

獲取可用字體列表

getFontList ()

生成圖片

addImage(imageData,format,x,y,width,height)
imageData：圖片的data URL
format：圖片的格式，比如png
x,y：距離頁(yè)面左上角的偏移
width,height：圖片的寬高

示例：

// 生成圖片
createImage() {
    // 生成pdf
    let doc = new JsPdf();
    doc.addImage(this.canvasImage,'jpeg',100,20,200,200);
    doc.save('b.pdf');
}

主要是要獲取圖片的data URL，可以借助canvas的toDataURL方法，可以借助一下上面的html2canvas

// 生成canvas并插入到容器里
 html2canvas(dom,options).then(canvas => {
     container.appendChild(canvas);
     this.canvasImage = canvas.toDataURL('image/jpeg');
 });

在這里插入圖片描述