html转pdf

主要用到的库有 jspdf，jspdf-autotable，html2canvas，dom-to-image。
在vue中的<script></script>引入上述4个文件

import JsPdf from 'jspdf'; //使用jspdf创建pdf
import autoTable from 'jspdf-autotable'; //生成pdf中的表格
import html2canvas from 'html2canvas'; //将dom生成内容在canvas中画出来
import domtoimage from 'dom-to-image';  //将html生成图片

dom-to-image把html生成图片

<div class="room-wall-outer"></div>
const targetDom = document.querySelector('.room-wall-outer'); //获取dom元素
  newImg = await domtoimage.toPng(targetDom); //返回base64编码的图片
                var img = new Image();
                img.src = newImg;
                document.body.appendChild(img);

html2canvas对于不显示的dom，可以把dom中的html生成图片。html2canvas的原理是将Dom节点在Canvas里边画出来.
隐藏 .net-draft-wrapper 跟 .net-draft-wrapper ，等html2canvas返回canvas对象以后net-draft-wrapper设置显示

<div class="net-draft-wrapper">   
  <div class="net-draft-wrapper"   style="width: 227px;"></div>
</div>  

// html2canvas 的 第一个参数是要截图的Dom对象，第二个参数是渲染完成后回调的canvas对象。
//await返回的是一个html2Canvas返回的canvas对象   netImg.toDataURL('image/png', 1)；把canvas转化成base64的图片
  netImg = await html2canvas(netDraft, {
        onclone (doc) {
        let e = szScene === '1' ? doc.querySelector('.net-draft-wrapper') : doc.querySelector('.net-draft-wrapper-1');
               e.style.visibility = 'visible'; // 设置该元素显示  在外层设置元素隐藏
                     }
            });

用JsPdf创建pdf页面，把上面获取到的截图可以放到pdf页面中再进行统一导出.

 \\创建pdf页面，args3 页面大小可以 ‘a3’,'a4',也可以设置具体的长宽 如：new jsPDF('p', 'px', [950, 1000]);
/**解决导出中文不乱码问题，我们需要提供一个编译处理过的js字体文件，给jsPDF设置上字体，就可以了。
*方法：*
1.先去[这里](https://rawgit.com/MrRio/jsPDF/master/fontconverter/fontconverter.html "这里") 转换你需要的字体（只支持 .ttf格式的字体）
2\. 在上面转换后你会得到一个js文件，打开文件我们只需要保留那很长的字符串，并且把它导出，其他代码可以注释掉。**/
let oJspdf = new JsPdf('p', 'px', 'a3');
f (this.oZhTTF === null) {
                this.oZhTTF = await this.jsonFile('zh.json'); 
            }
            oJspdf.addFileToVFS('en.otf', this.oZhTTF.zh1); //添加字体库
            oJspdf.addFont('en.otf', 'customEn', 'normal'); //添加字体  arg2 定义的字体名字
            oJspdf.addFont('enBold.otf', 'customEnBold', 'normal'); 
            let szSortFont = 'customEn';
            oJspdf.setFont('customEn');//设置字体
            szSortFont = 'customEn';
             let pageSize = oJspdf.internal.pageSize; //获取pdf的尺寸
            let pageWidth = pageSize.width ? pageSize.width : pageSize.getWidth(); //获取pdf的宽度
            let pageHeight = pageSize.height ? pageSize.height : pageSize.getHeight(); //获取pdf的长度

      //设置字体

    oJspdf.setFont('customEnBold');
    oJspdf.autoTable({ //添加表格
                    startY: 100,
                    theme: 'grid',
                    head:[['Model', 'SAP', 'Quantity', 'Remark']],
                    body: [
                            [aList[0], aCode[0], val1, type1],
                            [aList[1], aCode[1], val2, type2],
                            [aList[2], aCode[2], val3, type3]
                        ],
                    style: {
                        overflow: 'linebreak',
                        font: szSortFont
                    },
                    headStyles: {
                        fillColor: '#c00000'
                    },
                    bodyStyles: {
                        font: 'customEn'
                    },
                    columnStyles: {
                        1: {
                            cellWidth: 100
                        },
                        2: {
                            cellWidth: 80
                        }
                    }
                });
oJspdf.addPage();//添加下一页
 pdf.addImage(this.signImg.footElement, 'JPEG', 30, pageHeight - 30, width, width / 2264 * 6, '', 'FAST'); //添加图片 // arg3-->距离左边距;arg4-->距离上边距;arg5-->宽度;arg6-->高度
/***
addImage 的第一个参数可以有三个
this.signImg.footElement   图片转成的base64编码变量
setImg 
setImg.toDataURL('image/png', 1)
**/

//添加文字跟线
// 标题 y轴开始位置 文字开始位置 线段开始位置   线段宽度
        setHeader (pdf, title, beginY, txtX, lineX, lineWidth) { // 设置文件头的方法
            let setBeginY = beginY + 30;
            this.setHeadSigin(pdf, lineWidth);
            // 添加标题
            pdf.setFontSize(36);
            // pdf.setFontType('bold');
            pdf.text(title, txtX, setBeginY);
            pdf.setLineWidth(2);
            pdf.setDrawColor(0, 0, 0);
            pdf.line(lineX, setBeginY + 20, lineWidth + lineX, setBeginY + 20); // arg3-->距离左边距;arg4-->左边距离上面的位置;arg5-->宽度;arg6-->右边距离上面的位置
        },
//导出pdf文件
oJspdf.save('save.pdf');

官方文档：
http://html2canvas.hertzen.com/documentation
http://www.rotisedapsales.com/snr/cloud2/website/jsPDF-master/docs/jsPDF.html
https://github.com/simonbengtsson/jsPDF-AutoTable
字体推荐：
1、准备思源黑体的ttf文件，如下
https://github.com/be5invis/source-han-sans-ttf/releases
参考文件 ：
https://www.cnblogs.com/ww01/p/11496213.html