nuxt html转pdf下载

<div>
	<div id='pdfDom'>要转为pdf下载的内容</div>
	<div>
		<button @click='getPdf(htmlTitle)'>下载</button>
	</div>
</div>

data(){
	return{
		htmlTitle: 'resume',		//待下载的pdf文件名
	}
}

终端执行命令：

npm install --save html2canvas 		//下载内容转为图片
npm install jspdf --save			//图片转为pdf

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

import html2Canvas from 'html2canvas';
import JsPDF from 'jspdf';

export default {
  install(Vue, options) {
    Vue.prototype.getPdf = function (title, isShowPreviewFullTime) {
      html2Canvas(document.querySelector('#pdfDom'), {
        allowTaint: false,
        useCORS: true,
        x: 450,
        y: 30
      }).then(function (canvas) {
          let pageWidth = 595.28
          let pageHeight = canvas.height / (canvas.width / 592.28)
          let pageData = canvas.toDataURL('image/jpeg', 1.0)
          let PDF = new JsPDF('', 'pt', [pageWidth, pageHeight])
          PDF.addImage(pageData, 'JPEG', 0, 0, pageWidth, pageHeight)
          PDF.save(title + '.pdf')
        }
      )
    }
  }
}

同时， 在plugins文件夹下新建vue-html-pdf.js文件

import Vue from 'vue';
import htmlToPdf from "~/plugins/htmlToPdf";
Vue.use(htmlToPdf)

在nuxt.config.js文件中全局引入

module.exports = {
	plugins:[
		{ src: '~/plugins/vue-html-pdf.js', ssr: false },
	]
}