使用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');
  }
}

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

Answer 2

下载html页面内容，可以遵循：

1. 指定要将其内容下载为pdf的元素的ref

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

2. 创建按钮下载之类的 <button @click="download">Download PDF</button>
3. 确保将jsPDF库添加并导入到vue-component中 import jsPDF from 'jspdf'
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/png");
       doc.addImage(img,'JPEG',20,20);
       doc.save("sample.pdf");
      });
    },
   }

   请参阅演示@Download PDF via VUEJS。

但是使用canvas生成的pdf有一个问题，它的大小会变得太大。