vue基于html2canvas和jspdf 生成pdf 、解决jspdf中文乱码问题的方法详解

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

el 是要生成canvas的dom对象，
options是配置项，常用的配置项有：backgroundColor（背景色，默认白色）、
width（宽度）、height（高度）、useCORS（是否尝试使用 CORS 从服务器加载图像）、
canvas（canvas对象用作绘图基础的现有元素）

<template>
    <div>
        <div ref="a">
            <img src="./image/aa.webp" />
            <p>一张唐老鸭图片</p>
        </div>
        <el-button type="primary" @click="createCanvas">html转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;
            // 生成一个canvas对象
            let canvas = document.createElement('canvas');
            // 设置canvas的宽高
            canvas.width = width * 2;
            canvas.height = height * 2;
            // 生成页面模糊时，可以放大一定倍数，通过调整canvas的宽高使其清晰度增加
            const context = canvas.getContext('2d');
            context.scale(1.5, 1.5);
            // 配置项
            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>

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

text(text, x, y, flags) → {jsPDF}
text:文本内容
x,y  文本相对于页面左上角的偏移量
flags：具体是干啥的不填清楚，可以不用填

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

import './hyjt-normal';
// 添加并设置字体
console.log(doc.getFontList());
doc.setFont('hyjt');

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

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

//添加新页面
addPage()
//设置当前焦点在第几页
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');
}

setFontSize(number)

save(filename)

getFontList () 

addImage(imageData,format,x,y,width,height)
imageData：图片的data URL
format：图片的格式，比如png
x,y：距离页面左上角的偏移
width,height：图片的宽高

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

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