vue导出pdf格式

一、vue导出pdf格式

1.下载两个模块

代码如下（示例）：

第一个.将页面html转换成图片
npm install --save html2canvas 
第二个.将图片生成pdf
npm install jspdf --save

2.定义全局函数 创建一个htmlToPdf.js文件在指定位置.

代码如下（示例）：

// 导出页面为PDF格式
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'

export default function() {
  const title = this.htmlTitle
  html2Canvas(document.querySelector('#pdfDom'), {
    allowTaint: true
  }).then(function(canvas) {
    const contentWidth = canvas.width
    const contentHeight = canvas.height
    const pageHeight = (contentWidth / 592.28) * 841.89
    let leftHeight = contentHeight
    let position = 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 < 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引入

<el-button @click="getPdf()"
            key="success"
            type="primary">导出</el-button>
import getPdf from '@/components/htmlToPdf'
methods：{
	getPdf
}

3.在当前文件引入

import getPdf from '@/components/htmlToPdf'

4.在需要的导出的页面,调用我们的getPdf方法即可.

 <div class="content"
         id="pdfDom"
         ref="print">
     <p>董小姐 你从没忘记你的微笑 就算你和我一样 渴望着衰老 董小姐 你嘴角向下的时候很美 就像安和桥下 清澈的水 董小姐 我也是个复杂的动物 嘴上一句带过 心里却一直重复 董小姐 鼓楼的夜晚时间匆匆 陌生的人 请给我一支兰州 所以那些可能都不是真的 董小姐 你才不是一个没有故事的女同学 爱上一匹野马 可我的家里没有草原 这让我感到绝望 董小姐 董小姐 你熄灭了烟 说起从前 你说前半生就这样吧 还有明天 董小姐 你可知道我说够了再见 在五月的早晨 终于丢失了睡眠 所以那些可能都不是真的 董小姐 你才不是一个没有故事的女同学 爱上一匹野马 可我的家里没有草原 这让我感到绝望 董小姐 所以那些可能都会是真的 董小姐 谁会不厌其烦的安慰那无知的少年 我想和你一样 </p>
 </div>
<el-button @click="getPdf()"
            key="success"
            type="primary">导出</el-button>
import getPdf from '@/components/htmlToPdf'
export default {
  data () {
      return {
      htmlTitle: '页面导出PDF文件名'
      }
  }，
  methods：{
		getPdf
	}
 }

原文链接🔗：https://www.jianshu.com/p/dd120b65446a