使用jspdf和Vue.js生成pdf

Question

我是Vue.js的新手,我正在尝试生成PDF,但我不知道该怎么做.

这就是我所拥有的:

import * as jsPDF  from "jspdf"

export default {

  props: ['id'],


  methods: {
    pdf () {
      const doc = new jsPDF()
    }
  }

}

错误:

属性或方法"pdf"未在实例上定义,但在呈现期间引用

Answer 1

首先导入PDF库:

import jsPDF from 'jspdf'

然后简单地实例化对象并给它内容:

methods: {
  createPDF () {
    let pdfName = 'test'; 
    var doc = new jsPDF();
    doc.text("Hello World", 10, 10);
    doc.save(pdfName + '.pdf');
  }
}

请务必阅读文档以获取更多信息

Answer 2

下载html页面内容，如下所示：

1. 指定对元素的引用，您希望将其内容下载为pdf

   <div ref="content">
      ....
      ..
   </div>
   

2. 创建一个类似的按钮下载

   <button @click="download">Download PDF</button>
   

3. 确保将jsPDF库添加并导入到vue-component

   import jsPDF from 'jspdf' 
   import html2canvas from "html2canvas"
   

4. 在VUE组件中指定方法，例如

   methods: {
    download() {
     const doc = new jsPDF();
     const contentHtml = this.$refs.content.innerHTML;
     doc.fromHTML(contentHtml, 15, 15, {
       width: 170
     });
     doc.save("sample.pdf");
    },
   
    downloadWithCSS() {
      const doc = new jsPDF();
      /** WITH CSS */
      var canvasElement = document.createElement('canvas');
       html2canvas(this.$refs.content, { canvas: canvasElement 
         }).then(function (canvas) {
       const img = canvas.toDataURL("image/jpeg", 0.8);
       doc.addImage(img,'JPEG',20,20);
       doc.save("sample.pdf");
      });
    },
   }
   

   参见演示@ 通过VUEJS下载PDF。