安装
npm install jspdf --save
英文输出
import jsPDF from 'jspdf-customfonts' let doc = new jsPDF()
doc.text('Hello world!', , )
doc.save('a4.pdf')
中文输出, 截图版
把中文做成图片,在插入到jspdf
//安装js截图包
cnpm install --save html2canvas import jsPDF from 'jspdf'
import html2canvas from 'html2canvas'
html2canvas(document.querySelector("#capture")).then(canvas => {
let doc = new jsPDF()
doc.text('您输入的300与正确值相差0~10%', , ) //文本
doc.text('Hello world!', , )
doc.text('Hello world!', , )
doc.addImage(canvas.toDataURL('image/jpeg'), 'JPEG', , , , ) doc.addFont('Dengb.ttf', 'NotoSansCJKjp', 'normal')
doc.setFont('NotoSansCJKjp')
doc.text(, , '您输入的300与正确值相差0~10%')
let paragraph = '您输入的300与正确值相差0~10%您输入的300与正确值相差0~10%您输入的300与正确值相差0~10%'
let lines = doc.splitTextToSize(paragraph, )
doc.text(, , lines)
doc.save('a4.pdf')
})
结果
中文输出,引入字体版
1.cnpm install jspdf-customfonts安装
2.本地找到上面安装的包的源代码
3.找到windows的字体文件,ttf格式的
4.拷贝到步骤2的fonts文件下
5.返回上层目录,打开cmd窗口,运行node makeFonts.js,将在dist目录下生成default_vfs.js
5.default_vfs.js内容大致如下
6.将文件对应文件拷到其他地方,然后引入
<script src="https://unpkg.com/jspdf@latest/dist/jspdf.min.js"></script>
<script src="static/js/jspdf.customfonts.min.js"></script>
<script src="static/js/default_vfs.js"></script>
7.导入代码
let doc = new jsPDF()
doc.addFont('Dengb.ttf', 'NotoSansCJKjp', 'normal');
doc.setFont('NotoSansCJKjp');
doc.text('您输入的300与正确值相差0~10%', , ) //文本
doc.text('Hello world!', , )
doc.save('a4.pdf')