jspdf简单使用

时间：2024-01-19 17:01:09

安装

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')

          })

结果

jspdf简单使用

中文输出，引入字体版

1.cnpm install jspdf-customfonts安装

2.本地找到上面安装的包的源代码

jspdf简单使用

3.找到windows的字体文件，ttf格式的

jspdf简单使用

4.拷贝到步骤2的fonts文件下

jspdf简单使用

5.返回上层目录，打开cmd窗口，运行node makeFonts.js，将在dist目录下生成default_vfs.js

jspdf简单使用

5.default_vfs.js内容大致如下

jspdf简单使用

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')

8.结果对比

jspdf简单使用

jspdf简单使用

相关文章