实现页面可选区域 Pdf保存

Posted 2021-05-25 xiao旭

前端实现页面pdf保存，主要借助-html2canvas（页面元素进行绘画处理）-jspdf （实现图片到pdf的文件的转换

1.下载插件依赖

npm install html2canvas jspdf --save

2.定义实现的工具函数

import html2Canvas from \'html2canvas\'
import JsPDF from \'jspdf\'
export default{
  install (Vue, options) {
    Vue.prototype.getPdf = function (idDom) {
      var title = this.htmlTitle // 这里的this指向 调用的组件的data
      html2Canvas(document.querySelector(\'#pdfDom\'//idDom), {
        allowTaint: true,
        useCORS: true,  //使用cors从服务器加载图片
      }).then(function (canvas) {
        let contentWidth = canvas.width
        let contentHeight = canvas.height
        let pageHeight = contentWidth / 592.28 * 841.89
        let leftHeight = contentHeight
        let position = 0
	//a4纸的尺寸[595.28,841.89]，html 页面生成的 canvas 在pdf中图片的宽高
        let imgWidth = 595.28
        let imgHeight = 592.28 / contentWidth * contentHeight
        let pageData = canvas.toDataURL(\'image/jpeg\', 1.0)
        let PDF = new JsPDF(\'\', \'pt\', \'a4\')//pdf实例的默认参数 （ \'p\'纵/\'l\'横 默认p， 单位 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.全局引入实现方法

在项目主文件main.js中引入定义好的实现方法，并注册。（也可以局部进行导入，根据个人的业务实现来确定）

import htmlToPdf from \'@/components/utils/htmlToPdf\'
// 使用Vue.use()方法就会调用工具方法中的install方法
Vue.use(htmlToPdf)

4.在相关要导出的页面中，点击时调用绑定在Vue原型上的getPdf方法，传入id即可

//html
 <div id="pdfDom">
   <!-- 要下载的HTML页面,页面是由后台返回 -->
  <div v-html="pageData">
    <p data-html2canvas-ignore=\'true\'>true不打印该地方 false打印该地方</p>
	<!--传递最外层的id确定要打印的页面区域   通过 data-html2canvas-ignore 来控制打印的元素-->
  </div>
</div>
<el-button type="primary" size="small" @click="getPdf(\'#pdfDom\')">点击下载</el-button>

//js
export default {
  data () {
      return {
      	htmlTitle: \'页面导出PDF文件名\' //在工具函数里面直接可以访问 data的值 
      }
  }
 }