前端 JS 打印 WORD/EXCEL PDF

@前端打印页面，导出word，导出ppt
之前做的一个项目里要求结合页面的表格导出PDF和WORD并实现打印功能，就顺便做下总结
以前的有点不好，这次升级优化了下

导出PDF

这里我我选择了使用插件html2canvas+jspdf来做，先把插件的用法放出来:
jspdf 默认是下载的最新版本2.0的，发现用不了，就改成了这个版本
	安装	npm install html2canvas，npm istall jspdf@1.5.3
	引入	import html2canvas from 'html2canvas',import JsPdf from 'jspdf'
	使用	html2canvas(document.body).then(function(canvas) {
				document.body.appendChild(canvas);
			});
这里也可以使用类似于axios的方法把html2canvas挂载到Vue实例上使用，本人就是如此。接下来把我自己的贴上来

 this.$html2canvas(document.querySelector(this.pdf.dom)).then(canvas => {
                                const contentWidth = canvas.width
                                const contentHeight = canvas.height
                                const pageHeight = contentWidth / 592.28 * 841.89
                                let leftHeight = contentHeight
                                let position = this.pdf.position || 0	// 设置偏移 默认为0 
                                const imgWidth = 595.28
                                const imgHeight = 592.28 / contentWidth * contentHeight
                                const pageData = canvas.toDataURL('image/jpeg', 1.0)
                                const PDF = new JsPDF('', 'pt', 'a4')
                                if (leftHeight - 100 < pageHeight) { // -100 提高容错
                                    PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
                                } else {
                                    while (leftHeight > 0) {
                                        PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
                                        leftHeight -= pageHeight
                                        position -= 841.89
                                        if (leftHeight > 0) {
                                            PDF.addPage()
                                        }
                                    }
                                }
                                this.$Modal.remove()
                                PDF.save(this.pdf.title + '.pdf')	//这里设置下载文件的标题
                            })

导出word/excel

这里的思路是后端根据数据生成文档流发送给前台，前台再获取通过a标签的href和dowload下载到本地

// 这里如果axios使用的是axios.create()时，
// const http = axios.create()
// http({
//	url: '/getExcel',
//	method: 'get',
//	responseType: 'blob'
// })

this.$http.post('/getData', data, {
                    responseType: 'blob'	// 这个东西一定要加，不加就错了
                })
                    .then(res => {
                        const blob = new Blob([res.data], { type: 'application/vnd.openxmlformatsofficedocument.wordprocessingml.document;charset=utf-8' })
                        // excel的type是application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8
                        const objectUrl = URL.createObjectURL(blob)
						const link = document.createElement('a')
                        link.href = objectUrl
                        link.download = "this.title+'.docx'"	//设置下载的文件名
                        link.click()
                        link.remove()
                        this.isOut = false
                    }).catch(err => {
                        console.log(err)
                    })

打印

打印就比较简单了，指定一个dom节点，遍历其中的节点再打印

const bdhtml = document.getElementById('pdf').innerHTML	//	这里获取节点看自己选择
               const startHtml = window.document.body.innerHTML
               window.document.body.innerHTML = bdhtml
               window.print()
               window.document.body.innerHTML = startHtml