The effect of PDF generated by the front end is not as good as that generated by the back end, but it can also be generated.
This paper mainly usesjspdf+html2CanvasHTML to PDF.Jspdf does not support ChineseTherefore, you need to cooperate with html2canvas. If you convert pictures into PDF, you don’t have to consider Chinese and English, but there will be problemspagingandThe style is not friendlyQuestion of
1、 Preliminary preparation
1. Install jspdf:npm install jspdf –save
2. Install html2canvas:npm install –save html2canvas
2、 Code
1. html
Use hereiframeNest HTML files that need to be converted into PDF;
If the PDF content is dynamic, you can throw the HTML to the back end, let the back end use freemaker FTL template language or any other template language to change, and then pass the whole HTML to the front end as a string, and then the front end uses the srcdoc attribute of iframe to render the content.
2. Generate a single page
There is no split page content, but it is not very friendly to the style presentation. Sometimes the content is offset, sometimes good or bad. After continuous attempts, you can write the width of html2canvas to death when the offset occurs, but you need to guess the specific value
//Single page PDF: CSS can be highly adaptive (a CSS is used here. In order to realize multi page PDF without page segmentation of pictures, the height of each page is written in CSS. A4page)
getOnePdf() {
Var title = "single page report";
var dom = document. getElementById("pdf-container"); // Generate HTML content of PDF
html2Canvas(dom, {
allowTaint: true,
scrollY: 0,
scrollX: 0,
Usecors: true, // enable Cross Hospital
Width: 1000, // this width is bullshit. Fix 1000 to prevent offset!
height: dom.offsetHeight
}).then(function(canvas) {
var contentWidth = canvas.width;
var contentHeight = canvas.height;
var pdfWidth = (contentWidth + 10) / 2 * 0.75;
var pdfHeight = (contentHeight + 200) / 2 * 0.75; // 500 is left blank at the bottom
var imgWidth = pdfWidth;
var imgHeight = contentHeight / 2 * 0.75; // There is no need to leave a blank distance here
var pageData = canvas.toDataURL("image/jpeg", 1.0);
var pdf = new JsPDF("", "pt", [pdfWidth, pdfHeight]);
pdf.addImage(pageData, "jpeg", 0, 0, imgWidth, imgHeight);
pdf.save(title + ".pdf");
});
},
3. Generate multiple pages
Pagination will cause problems: for example, the picture is split, a row of the table is broken from the middle, etc I use the stupid method to manually adjust the width and height of iframe + html2canvas width, height + contentwidth and contentheight, and try out the appropriate values bit by bit (there should be a better method, but the technology is limited)
//The width and height of iframe + the width, height + contentwidth and contentheight of html2canvas need to be manually adjusted for the multi page PDF converted style
getManyPdf() {
let _this = this;
var dom = document. getElementById("pdf-container"); // Generate HTML content of PDF
html2Canvas(dom, {
allowTaint: true,
scrollY: 0,
scrollX: 0,
Usecors: true, // enable Cross Hospital
Width: 1000, // this width is bullshit. Fix 1000 to prevent offset!
height: dom.offsetHeight
}).then(function(canvas) {
var contentWidth = 900; // Wide high write dead, forced paging
var contentHeight = 5060;
//One page PDF displays the height of the canvas generated by the HTML page;
var pageHeight = contentWidth / 592.28 * 841.89;
//HTML page height without PDF generated
var leftHeight = contentHeight;
//Page offset
var position = 0;
//A4 paper size [595.28841.89], width and height of canvas generated by HTML page in PDF
var imgWidth = 595.28;
var imgHeight = 3400; // For paging, so write dead. 592.28 / contentwidth * contentheight will cause the picture to be segmented
var pageData = canvas.toDataURL("image/jpeg", 1.0);
var pdf = new JsPDF("", "pt", "a4");
//There are two heights that need to be distinguished. One is the actual height of the HTML page and the height of the generated PDF page (841.89)
//When the content does not exceed the range displayed on one page of PDF, pagination is not required
if (leftHeight < pageHeight) {
pdf.addImage(pageData, "JPEG", 0, 0, imgWidth, imgHeight);
} else {
while (leftHeight > 0) {
//ARG3 -- > left margin; Arg4 -- > distance upper margin; Arg5 -- > width; Arg6 -- > height
pdf.addImage(pageData, "JPEG", 0, position, imgWidth, imgHeight);
leftHeight -= pageHeight;
position -= 841.89;
//Avoid adding blank pages
if (leftHeight > 0) {
pdf.addPage();
}
}
}
pdf. Save ('multi page report}. PDF ');
});
}3、 All codes
<div style="width: 100%; height: 100%; overflow: auto">
< El button @ Click = "getonepdf" type = "primary" > download single page < / El button >
< El button @ Click = "getmanypdf" type = "primary" > Download multi page < / El button >
<!-- Container to PDF -- >
<div>
<iframe src="/exportPDF/exportPDF.html" width="1000" height="5200"></iframe>
</div>
</div>
</template>
<script>
import html2Canvas from "html2canvas";
import JsPDF from "jspdf";
export default {
data() {
return {};
},
methods: {
//Single page PDF: CSS can be highly adaptive (a CSS is used here. In order to realize multi page PDF without page segmentation of pictures, the height of each page is written in CSS. A4page)
getOnePdf() {
Var title = "single page report";
var dom = document. getElementById("pdf-container"); // Generate HTML content of PDF
html2Canvas(dom, {
allowTaint: true,
scrollY: 0,
scrollX: 0,
Usecors: true, // enable Cross Hospital
Width: 1000, // this width is bullshit. Fix 1000 to prevent offset!
height: dom.offsetHeight
}).then(function(canvas) {
var contentWidth = canvas.width;
var contentHeight = canvas.height;
var pdfWidth = (contentWidth + 10) / 2 * 0.75;
var pdfHeight = (contentHeight + 200) / 2 * 0.75; // 500 is left blank at the bottom
var imgWidth = pdfWidth;
var imgHeight = contentHeight / 2 * 0.75; // There is no need to leave a blank distance here
var pageData = canvas.toDataURL("image/jpeg", 1.0);
var pdf = new JsPDF("", "pt", [pdfWidth, pdfHeight]);
pdf.addImage(pageData, "jpeg", 0, 0, imgWidth, imgHeight);
pdf.save(title + ".pdf");
});
},
//The width and height of iframe + the width, height + contentwidth and contentheight of html2canvas need to be manually adjusted for the multi page PDF converted style
getManyPdf() {
let _this = this;
var dom = document. getElementById("pdf-container"); // Generate HTML content of PDF
html2Canvas(dom, {
allowTaint: true,
scrollY: 0,
scrollX: 0,
Usecors: true, // enable Cross Hospital
Width: 1000, // this width is bullshit. Fix 1000 to prevent offset!
height: dom.offsetHeight
}).then(function(canvas) {
var contentWidth = 900; // Wide high write dead, forced paging
var contentHeight = 5060;
//One page PDF displays the height of the canvas generated by the HTML page;
var pageHeight = contentWidth / 592.28 * 841.89;
//HTML page height without PDF generated
var leftHeight = contentHeight;
//Page offset
var position = 0;
//A4 paper size [595.28841.89], width and height of canvas generated by HTML page in PDF
var imgWidth = 595.28;
var imgHeight = 3400; // For paging, so write dead. 592.28 / contentwidth * contentheight will cause the picture to be segmented
var pageData = canvas.toDataURL("image/jpeg", 1.0);
var pdf = new JsPDF("", "pt", "a4");
//There are two heights that need to be distinguished. One is the actual height of the HTML page and the height of the generated PDF page (841.89)
//When the content does not exceed the range displayed on one page of PDF, pagination is not required
if (leftHeight < pageHeight) {
pdf.addImage(pageData, "JPEG", 0, 0, imgWidth, imgHeight);
} else {
while (leftHeight > 0) {
//ARG3 -- > left margin; Arg4 -- > distance upper margin; Arg5 -- > width; Arg6 -- > height
pdf.addImage(pageData, "JPEG", 0, position, imgWidth, imgHeight);
leftHeight -= pageHeight;
position -= 841.89;
//Avoid adding blank pages
if (leftHeight > 0) {
pdf.addPage();
}
}
}
pdf. Save ('multi page report}. PDF ');
});
}
},
created() {
},
mounted() {}
};
</script>remaining problems
1. Generate multi page PDF, and the paging content is split