使用jspdf和Vue.js生成pdf

Question

我刚接触Vue.js，现在想生成一个PDF，但不知道该怎么做。

以下是我的代码：

import * as jsPDF  from "jspdf"

export default {

  props: ['id'],


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

}

错误：

在渲染过程中引用了实例上未定义的属性或方法"pdf"

错误：

在渲染时引用了实例上未定义的属性或方法“pdf”

- Carlos Uriel Santiago

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

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

- samayo

---

我看到了“ReferenceError: jsPDF未定义”，但是当我执行new jspdf.jsPDF()时它可以工作？ - Akin Hwan

好的，考虑到这个问题已经在3年前得到了解答，一些更新可能已经发生。请确保方法文件可以访问文件导入器。 - samayo

如果我们放置外部网络URL，该如何使用？ - learningMonk

@user7411584 我认为你需要先下载文件。 - samayo

谢谢您的回复。您能指导我吗？如果我要下载innerHTML，首先需要放置任何网址吗？ - learningMonk

请查看此答案：https://dev59.com/1GQn5IYBdhLWcg3wamfO#54126825 - samayo

Answer 2

下载HTML页面内容，可以按照以下步骤进行：

1. 指定要下载为PDF的元素的引用

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

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

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

3. 请确保将jsPDF库添加并导入到Vue组件中

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。

- Abhay

---

@techyaura，“使用CSS下载”按钮抛出`5ms html2canvas: DOMException:“操作不安全。”。虽然很有趣！ - Pierre Cordier

在这个测试的目的下，运行没有CORS限制的浏览器可以解决这个问题。 - Pierre Cordier

您发送的演示链接 https://codesandbox.io/s/738o84vxnq 无法使用。 - shaked

请注意，jsPDF不再使用"fromHTML"。现在你需要使用'html'函数。更多信息请参见http://raw.githack.com/MrRio/jsPDF/master/docs/module-html.html。 - akaHeimdall

将任何网页URL作为输入以将此页面转换为PDF？我如何在网页URL上使用它？ - learningMonk

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组件中

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

- vikas etagi

---

将任何网页URL作为输入以将此页面转换为PDF？我如何在网页URL上使用它？ - learningMonk

Answer 4

我曾有相似的问题，尤其是生成合适的大小和分辨率。

为了简洁起见，以下是一个帖子链接：

使用jsPDF、html2Canvas和Vue生成PDF

我进行了修改以适应我的需求：

downloadItem() {
        const invoiceName = this.currentInvoice.invoiceId,
              content = this.$refs.invoiceContent;

        const doc = new jsPDF({
            orientation: "landscape",
            unit: "px",
            format: "a4",
            hotfixes: ["px_scaling"],
        });

        html2canvas(content, {
            width: doc.internal.pageSize.getWidth(),
            height: doc.internal.pageSize.getHeight(),
        }).then((canvas) => {
            const img = canvas.toDataURL("image/png");

            doc.addImage(
                img,
                "PNG",
                140,
                10,
                doc.internal.pageSize.getWidth(),
                doc.internal.pageSize.getHeight()
            );

            doc.save("invoice-" + invoiceName + ".pdf");
        });
    },

以下是 jsPDF 文档的链接：

jsPDF 文档

- Okiemute Gold