Javascript 使用 jspdf 和 Vue.js 生成 pdf
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47668546/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Generate pdf with jspdf and Vue.js
提问by Carlos Uriel Santiago
I am new with Vue.js, and I am trying to generate a PDF, but I have no idea how to do it.
我是 Vue.js 的新手，我正在尝试生成 PDF，但我不知道该怎么做。
This is what I have:
这就是我所拥有的：
import * as jsPDF from "jspdf"
export default {
props: ['id'],
methods: {
pdf () {
const doc = new jsPDF()
}
}
}
Error:
错误：
Property or method "pdf" is not defined on the instance but referenced during render
属性或方法“pdf”未在实例上定义，但在渲染期间被引用
回答by samayo
First import the PDF library as:
首先将 PDF 库导入为：
import jsPDF from 'jspdf'
Then simply instantiate the object and give it the contents:
然后简单地实例化对象并为其提供内容：
methods: {
createPDF () {
let pdfName = 'test';
var doc = new jsPDF();
doc.text("Hello World", 10, 10);
doc.save(pdfName + '.pdf');
}
}
Make sure to read the documentationfor more
请务必阅读文档以获取更多信息
回答by techyaura
Download html page content, One can follow as:
下载html页面内容，可以如下：
Specify the ref to the element, whose content you want to download as pdf
<div ref="content"> .... .. </div>Create a button download like
<button @click="download">Download PDF</button>Make sure to add & import jsPDF library into vue-component
import jsPDF from 'jspdf' import html2canvas from "html2canvas"Specify the method into the VUE component 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"); }); }, }See the demo @Download PDF via VUEJS.
指定元素的引用，其内容要下载为 pdf
<div ref="content"> .... .. </div>创建一个按钮下载，如
<button @click="download">Download PDF</button>确保将 jsPDF 库添加并导入到 vue-component
import jsPDF from 'jspdf' import html2canvas from "html2canvas"将方法指定到 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。
回答by vikas etagi
Download html page content, One can follow as:
下载html页面内容，可以如下：
Specify the ref to the element, whose content you want to download as pdf
<div ref="content">
....
..
</div>
Create a button download like
创建一个按钮下载，如
<button @click="downloadWithCSS">Download PDF</button>
Make sure to add & import jsPDF library into vue-component
确保将 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);
});
},
}
