VUE2项目前端实现pdf导出和打印(解决返回后监听失效)

一、页面导出为pdf实现

1、安装必要的库

html2canvas和jsPDF这两个库

npm install html2canvas jspdf

2、封装js插件

在utils文件夹下新建htmlToPdf.js文件

import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default {
  install(Vue, options) {
    Vue.prototype.getPdf = function (title) {
      html2Canvas(document.querySelector('#pdfDom'), {
        allowTaint: true,
        taintTest: false,
        useCORS: true,
        // y:72, // 对Y轴进行裁切
        // width:1200,
        // height:5000,
        dpi: window.devicePixelRatio * 4, //将分辨率提高到特定的DPI 提高四倍
        scale: 4, //按比例增加分辨率
      }).then(function (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)
        let PDF = new JsPDF('', 'pt', 'a4')
        if (leftHeight < pageHeight) {
          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()
            }
          }
        }
        PDF.save(title + '.pdf')
      })
    }
  },
}

3、挂载到VUE上

在main.js文件中引入并挂载

import htmlToPdf from './utils/htmlToPdf.js'

Vue.use(htmlToPdf)

4、使用

在需要导出为pdf的文件中

<template>
  	<div>
	  	<div id="pdfDom" class="pdf-box">
			这是打印的区域
		</div>
        <button type="primary" @click="exportPdf" >导出</button>
	</div>
</template>

<script>
export default {
  methods: {
    exportPdf() {
      this.getPdf('打印文件')
    },
}
</script>
<style>
.pdf-box {
	width: 1006px;
	height: 1430px;
	box-sizing: border-box;
}
</style>

点击导出按钮，即可打出id为pdfDom的区域

5、注意事项

为什么宽高设定为1006px和1430px？
输出为A4纸大小的pdf时，pdf和网页效果可能不同，出现内容丢失或者边距过大的问题。经过测试发现，宽高设定为1006px和1430px时可以达到1:1还原。

二、页面打印实现

1、直接使用

主要使用到window的内置方法window.print()
调用网页的打印功能进行打印

window.print()

2、进阶 打印某一块区域

通常来说，我们实都是去打印某一块区域。那么可以通过复制一份出来的方式来打印

	printPage() {
   		//pdfDom为打印区域所绑定的id
  		const subOutputRankPrint = document.getElementById('pdfDom')
      	// 创建一个新的div
      	const printDiv = document.createElement('div')
      	printDiv.innerHTML = subOutputRankPrint.innerHTML
      	printDiv.style.position = 'fixed'
      	printDiv.style.left = '0'
      	printDiv.style.top = '0'
      	printDiv.style.width = '100%'
      	printDiv.style.height = '100%'
      	printDiv.style.zIndex = '999999'
      	printDiv.style.background = '#fff'
      	printDiv.style.overflow = 'auto'
      	// 插入到网页中去
      	document.body.appendChild(printDiv)
      	window.print()
      	document.body.removeChild(printDiv)
   	},

3、注意事项

有两个需要注意的地方，
一个是 less或sass等预编译器可能会失效，在 pdfDom 请使用普通css写法

第二个需要注意的地方是打印部分的复制，部分文章给出的打印写法如下，代码行数更少，

printFn() {
 	//pdfDom为打印区域所绑定的id
	let newstr = document.getElementById("pdfDom").innerHTML;
	let oldstr = document.body.innerHTML;
	document.body.innerHTML = newstr;
	window.print();
	document.body.innerHTML = oldstr;
	return false;
}

但是此种写法会导致返回后 监听失效，即按钮等操作失效 ，所以不推荐此种写法