使用 jspdf 和 Vue.js 生成 pdf

Question

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

这是我的：

import * as jsPDF  from "jspdf"

export default {

  props: ['id'],


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

}

错误：

Property or method "pdf" is not defined on the instance but referenced during render

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页面内容，可关注：

指定要将其内容下载为 pdf 的元素的引用
```
<div ref="content">
   ....
   ..
</div>
```

创建按钮下载喜欢

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

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

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

将方法指定到VUE组件中like

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");
   });
 },
}

查看演示 @Download PDF via VUEJS.

Answer 3

下载html页面内容，可关注：

Specify the ref to the element, whose content you want to download as pdf

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

创建按钮下载喜欢

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

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

import jsPDF from 'jspdf' 
import domtoimage from "dom-to-image";


Specify the method into the VUE component like

methods: {
 downloadWithCSS() {

   /** WITH CSS */
    domtoimage
    .toPng(this.$refs.content)
    .then(function(dataUrl) {
      var img = new Image();
      img.src = dataUrl;
      const doc = new jsPDF({
        orientation: "portrait",
        // unit: "pt",
        format: [900, 1400]
      });
      doc.addImage(img, "JPEG", 20, 20);
      const date = new Date();
      const filename =
        "timechart_" +
        date.getFullYear() +
        ("0" + (date.getMonth() + 1)).slice(-2) +
        ("0" + date.getDate()).slice(-2) +
        ("0" + date.getHours()).slice(-2) +
        ("0" + date.getMinutes()).slice(-2) +
        ("0" + date.getSeconds()).slice(-2) +
        ".pdf";
      doc.save(filename);
    })
    .catch(function(error) {
      console.error("oops, something went wrong!", error);
    });
 },
}

使用 jspdf 和 Vue.js 生成 pdf

Generate pdf with jspdf and Vue.js

javascript

pdf

jspdf

vuejs2