前端实现：Html转换PDF导出画质提升，边距调整

斗萝大陆

于 2021-12-29 17:18:08 发布

阅读量2.7k

点赞数 2

分类专栏： html转PDF完整版文章标签：前端 html5

本文链接：https://blog.youkuaiyun.com/qq_57260058/article/details/122219480

版权

1.首先，将html转pdf打印下载功能，使用html2canvas+jsPDF


npm install html2canvas --save
npm install jspdf --save

在项目文件夹utils中创建htmlToPdf.js文件，代码如下：

// 导出页面为PDF格式
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default{
  install (Vue, options) {
    Vue.prototype.getPdf = function () {
      var title = this.htmlTitle
      html2Canvas(document.querySelector('#pdfDom'), {
        allowTaint: true
      }).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