html2pdf：如何隐藏<div>从PDF？
[英]html2pdf: How To Hide <div> From PDF?
问题描述
I'm using html2pdf
我正在使用html2pdf
I can Generate PDF of my Invoice, but i don't want a <div class="div-dont-want-to-display"> to display on my PDF, how can i do that ?我可以生成发票的 PDF，但我不希望<div class="div-dont-want-to-display">在我的 PDF 上显示，我该怎么做？
My Vue.js Component :我的Vue.js Component ：
<template>
<div class="invoice p-3 mb-3" id="mydiv">
<div class="div-dont-want-to-display">
<!-- AND MANY MORE DIV'S -->
<!--BUTTON TO DOWNLOAD PDF-->
<a href @click.prevent="createPDF"class="btn btn-primary float-right">
<i class="fa fa-download"></i> Generate PDF </a>
</div>
</template>
Method for createPDF() : createPDF()方法：
import html2pdf from 'html2pdf.js'
export default {
methods: {
createPDF() {
var element = document.getElementById('mydiv');
var opt = {
margin: 0,
filename: 'myfile.pdf',
image: {type: 'jpeg',quality: 0.98},
html2canvas: {scale: 2},
jsPDF: {
unit: 'mm',
format: [280, 350],
orientation: 'portrait'
}
};
html2pdf().set(opt).from(element).save();
},
}
}
4 个解决方案
解决方案1
8 已采纳 2018-11-28 20:00:21
You can use the library html2pdf that uses jsPDF and html2canvas.您可以使用库HTML2PDF使用jsPDF和html2canvas。
The lib creates an PDF from a image of the div that you pass as an argument.该库根据您作为参数传递的 div 图像创建 PDF。
The code to call the lib after importing is as follows:导入后调用lib的代码如下：
var element = document.getElementById('content'); html2pdf(element);
<div id="content"> Test </div>
You can pass some options too, more details on the github of the lib.您也可以传递一些选项，有关 lib 的 github 的更多详细信息。
You can hide some elements using the following tag:您可以使用以下标签隐藏一些元素：
<div id="element-to-hide" data-html2canvas-ignore="true"></div>
解决方案2
1
You need to add an id to your div as follows :您需要向您的 div 添加一个id ，如下所示：
<div id="toprint" class="invoice" >
....
and in the method get the content of that div :并在方法中获取该 div 的内容：
let pdfName = 'test';
var doc = new jsPDF();
let content=document.getElementById("toprint").outerHTML
doc.text(content, 10, 10);
doc.save(pdfName + '.pdf');
or by using the default printing functionality in browser:或使用浏览器中的默认打印功能：
createPDF() {
let content = document.getElementById("toprint").outerHTML;
/******************** */
let yourDOCTYPE = "<!DOCTYPE html...";
let printPreview = window.open("", "print_preview");
let printDocument = printPreview.document;
printDocument.open();
let head =
"<head>" +
"<title>" +
this.title +
"</title>" +
+
"</head>";
printDocument.write(
yourDOCTYPE +
"<html>" +
head +
"<body>"
content +
"</body>" +
"</html>"
);
printPreview.print();
printPreview.close();
}
解决方案3
0 2018-11-28 19:46:20
Edit: When I initially answered this question, OP wanted to use jsPDF.编辑：当我最初回答这个问题时，OP 想使用 jsPDF。
See How to properly use jsPDF library请参阅如何正确使用 jsPDF 库
For vue you'll probably want to generate some sort of unique id for each component element so that way you don't grab the first element every time.对于 vue，您可能希望为每个组件元素生成某种唯一的id ，这样您就不会每次都获取第一个元素。
var pdf = new jsPDF('p', 'pt', 'letter'); var ele = document.getElementsByClassName("invoice")[0]; // var ele = document.getElementById("mydiv"); var margins = { top: 80, bottom: 60, left: 40, width: 522 }; var cb = function (dispose) { pdf.save('Test.pdf'); } var opt = { 'width': margins.width }; pdf.fromHTML(ele,margins.left, margins.top, opt, cb, margins)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.1/jspdf.min.js"></script> <div id="mydiv" class="invoice"><b> Test </b></div>
解决方案4
0 2019-08-28 11:07:53
var element = document.getElementById('target-div');
var opt = {
margin:0,
filename: 'myfile.pdf',
image: {type: 'jpeg',quality: 0.98},
html2canvas: {scale: 2},
jsPDF: {
unit: 'mm',
orientation: 'portrait'
}
};
html2pdf().set(opt).from(element).save();
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.