前端生成pdf和word

生成pdf

1. 引入html2canvas和jsPDF插件
2. 调用html2canvas

pdfdom是导出的页面最外成元素，a4纸的大小592.28*841.89px

 html2canvas(pdfdom,
            {	
                padding: 0,
                width: 592.28 * 2,
                dpi: 192, // 清晰度
                scale: 2, // 页面缩放
                allowTaint: true,
                
            }).then((canvas) => {
                let contentWidth = canvas.width
                let contentHeight = canvas.height
                let pageHeight = contentWidth / 592.28 * 841.89
                let leftHeight = contentHeight
                let position = 0
                let imgWidth = 595.28
                let imgHeight = 592.28 / contentWidth * contentHeight
                let pageData = canvas.toDataURL('image/jpeg', 1.0)
                console.log('cw:'+ contentWidth,'ch:'+contentHeight,'ph:'+pageHeight);
                let PDF = new jsPDF('', 'pt', 'a4')
                if (leftHeight < pageHeight) {
                PDF.addImage(pageData, 'JPEG', 20, 0, imgWidth, imgHeight)
                } else {
                while (leftHeight > 0) {
                    PDF.addImage(pageData, 'JPEG', 20, position, imgWidth, imgHeight)
                    leftHeight -= pageHeight
                    position -= 841.89
                    if (leftHeight > 0) {
                        PDF.addPage()
                    }
                }
                }
                PDF.save(filename + '.pdf');
            })

生成word文档

1. jquery.wordexport插件
2. filesaver插件

el是导出文档的最外层元素，filesaver插件要先于wordexport引入

$(el).wordExport(filename)

生成pdf样式最好写在元素的style属性里面，生成的word样式必须写在元素的style属性内才会生效