vue基于html2canvas和jspdf 生成pdf 、解决jspdf中文乱码问题的方法详解
作者：无知的小菜鸡
这篇文章主要介绍了vue基于html2canvas和jspdf 生成pdf 、解决jspdf中文乱码问题的方法,结合实例形式详细描述了中文乱码问题的原因、解决方法与相关注意事项,需要的朋友可以参考下
html2canvas
备注：以下内容都是基于官方文档
简介
该脚本允许您直接在用户浏览器上对网页或其部分进行“截图”。屏幕截图基于 DOM，因此可能不是 100% 准确到真实表示，因为它不会制作实际的屏幕截图，而是根据页面上可用的信息构建屏幕截图。
安装及使用
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对象用作绘图基础的现有元素）
参考文章：html2canvas使用笔记
示例
下面的例子基于Vue
<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>
效果图
jspdf
基础语法
new jsPDF(orientation, unit, format) → {jsPDF}
orientation：方向，默认p(竖直方向)，可选l(横向)
unit：单位，指定坐标时要使用的测量单位。“pt”（点）、“mm”（默认）、“cm”、“in”之一
format ：应该是纸张格式，默认a4
常用方法
文本
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');
}
下面是生成的pdf文件
关于中文乱码问题
查了一下官网，官网内容如下（官网是英文的，用谷歌翻译，翻译了一下）
jspdf git地址
官网里提供的那个地址不太好使，我这里把代码下到了本地。找到下面的这个html文件
点击打开，可以看到下面的网站
上传一个ttf的字体文件，会生成一个js文件。然后将文件引入到页面里
import './hyjt-normal';
// 添加并设置字体
console.log(doc.getFontList());
doc.setFont('hyjt');
doc.getFontList() 用于获取当前支持那些字体，doc.setFont(); 设置字体，值一定要与你上面填的名一致，打开这个js文件可以看到：
示例：
// 生成文本
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');
}
说一下流程：默认内容会在第一页，执行addPage()后会生成新的一页，焦点跳到第二页，I am on page 2 会在第二页里生成；执行setPage(1) ，焦点跳转到第一页，I am on page 1会在第一页里生成
设置字体大小
setFontSize(number)
保存pdf
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');
}
主要是要获取图片的data URL，可以借助canvas的toDataURL方法，可以借助一下上面的html2canvas
// 生成canvas并插入到容器里
html2canvas(dom,options).then(canvas => {
container.appendChild(canvas);
this.canvasImage = canvas.toDataURL('image/jpeg');
});
