ReactJS中加入jspdf

• 背景
• 版本
• 步骤
• • 1.下载jspdf
  • 2.导入jspdf和html2canvas
  • 3.调用.html()方法
  • 4.相关问题
  • • 4.1 出现找不到html2canvas的问题？
    • 4.2 尺寸不容易控制？

背景

客户需要在前端将html转成pdf的功能，使用jspdf这个插件

版本

ReactJs 16.8.6

步骤

1.下载jspdf

npm install --save jspdf 
           

2.导入jspdf和html2canvas

import * as jsPDF from 'jspdf';
import * as html2canvas from 'jspdf/node_modules/html2canvas'
window.html2canvas = html2canvas;//这里记得将html2canvas设为全局，不然后面找不到
           

3.调用.html()方法

let pdf = new jsPDF('p','pt','a4');//创建一个竖向，单位为pt，大小为a4的页面
        let printDoc = document.createElement("div");//新建dom元素（使用已有的也行）
        let docTitle = document.createElement("div");//标题
        let docDetail = document.createElement("div");//内容
        docTitle.innerHTML=item.Title;
        docDetail.innerHTML=item.Detail;
        printDoc.setAttribute('style','font-family:Arial, Helvetica, sans-serif;width:1000px;padding:40px');//属性设置
        docTitle.setAttribute('style','font-size:30px');//属性设置
        docDetail.setAttribute('style','font-size:20px');//属性设置
        printDoc.appendChild(docTitle);//组合DOM
        printDoc.appendChild(docDetail);//组合DOM
        
        pdf.html(printDoc, {
             html2canvas:{
                width: 1000,
                scale:0.6 //缩放系数，根据具体的页面再调整
              },
             callback: function (pdf) {
               pdf.save(String(item.Title)+".pdf");//保存
             }});
           

4.相关问题

4.1 出现找不到html2canvas的问题？

A：因为html()方法会在内部调用html2canvas所以要将html2canvas导入进来，并且使用window.html2canvas设置一下。

4.2 尺寸不容易控制？

A：首先DOM元素和html2canvas画布的尺寸要使用px单位（防止分辨率不同的机器上显示不同），画布生成后再会导入创建pdf页面，此时pdf页面要使用绝对单位pt。通过一定的缩放设置（scale）保证canvas能导入到pdf。