@前端打印页面,导出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