At present, online tutorials are basically converted into pictures by Canvas2HTML, and then exported by jsPDF. In this way, the exported pictures are only drawn on canvas, and the text content and pictures inside cannot be copied interactively

So the way I use it is to export PDF directly using jsPDF’s HTML () method so that the exported PDF will interact properly

The jsPDF version is 2.3.1 and HTML2Canvas is 1.0.0-RC.7

Because jsPDF needs to insert the corresponding font conversion file for Chinese glyphs, the conversion address is FontConverter

The corresponding Chinese font can be converted according to the font used in the project. At present, I am using the TTF file of Siyuan boldface. Please note that OTF file is not used, and font file download address is not used

There may be a problem that the font file is too large and the project is directly imported, so it is recommended to import the script tag

// use * {font-family: SourceHanSans; } / / resources into < script SRC = "static/Pdf/html2canvas. Min. Js" > < / script > < script SRC = "static/Pdf/JSPDF. Umd. Min. Js" > < / script > <script src="static/Pdf/SourceHanSans-normal.min.js"></script>Copy the code

PDF Export Method

export default { install(Vue, options) { Vue.prototype.exportPdfFile = function (pdfName) { const JsPDF = window.jspdf.jsPdf let PDF = new JsPDF('p', 'pt', 'a4') let pdfDom = document.getelementById ('# PDF ') const targetWidth = pdfDom. ClientWidth const targetHeight = pdfdom.clientheight // The normal size of a4 paper is 592.28 wide, The height is 841.89 const pageWidth = 592.28 const pageHeight = 841.89 let contentHeight = pageWidth/targetWidth * targetHeight While (contentHeight > 0) {contentHeight -= pageHeight) {pdf.addPage ()} Call the save method to generate PDF file PDF, HTML (pdfDom, {callback: function (doc) {/ / export PDF doc. Save (pdfName | | 'export PDF. PDF')}, x: 0, y: 0})}}}Copy the code

At this point, the PDF export is basically successful, but there is a problem:

JsPDF defines a set of objects simulating canvas for PDF export, while HTML2Canvas is for PDF export of native Canvas. Therefore, when jsPDF is used for PDF export, background images in CSS are not supported and will be filled with the default black background. Images can be exported only after being inserted with the IMG tag