vue中实现将页面或者div内容导出为pdf格式

最新推荐文章于 2024-06-20 10:50:10 发布

淡漠爱清凉

最新推荐文章于 2024-06-20 10:50:10 发布

阅读量2.8k

点赞数

文章标签： javascript html5 vue.js npm

本文链接：https://blog.csdn.net/mr_115/article/details/132470615

版权

将Vue单页面转成pdf并下载

步骤1：下载对应的库

npm install html2canvas;

npm install jspdf --save

步骤2：创建一个htmlToPdf.js的js文件, 然后在main.js中全局引用一下，编写如下代码：

// htmlToPdf.js
// 导出页面为PDF格式
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default {
  install(Vue, options) {
    Vue.prototype.getPdf = function () {
      var title = this.htmlTitle  //DPF标题
        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 =