First, the effect is to use html2Canvas, the official plug-in

In the code

The home page code

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, /> <title>Document</title> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" /> <style> </style> </head> <body> <div id="app"> <el-tag size="mini" style="cursor: pointer; text-align: center;" @click="screenshot"> download </el-tag> <br> <br> <el-row> <el-button> default button </el-button> <br> <el-button <br> <el-button type="success"> </el-button><br> <el-button type="success"> </el-button><br> <el-button Type ="info"> Information button </el-button><br> < EL-button type=" Warning "> Warning button </el-button><br> <el-button </el-button><br> <el-button icon="el-icon-search" circle></el-button><br> <el-button type="primary" icon="el-icon-edit" circle></el-button><br> <el-button type="success" icon="el-icon-check" circle></el-button><br> <el-button type="info" icon="el-icon-message" circle></el-button><br> <el-button type="warning" icon="el-icon-star-off" circle></el-button><br> <el-button type="danger" icon="el-icon-delete" circle></el-button><br> <el-button </el-button><br> <el-button type="primary" plain> </el-button><br> <el-button type="success" <el-button ><br> < EL-button type="info" plain> </el-button><br> < EL-button type="warning" <el-button ><br>< el-button type=" Danger "plain </el-button><br><br> <el-button round> </el-button><br> <el-button type="primary" round> </el-button><br> <el-button type="success" round> </el-button><br> <el-button type="success" round> </el-button><br> <el-button <el-button ><br> <el-button type="info" round </el-button><br> <el-button type="warning" round </el-button><br> <el-button type="danger" Round risk > button < / el - button > < br > < / el - row > < / div > < script SRC = "https://unpkg.com/vue/dist/vue.js" > < / script > < script SRC = "https://cdn.bootcdn.net/ajax/libs/vue/2.6.2/vue.js" > < / script > <! - the introduction of component library - > < script SRC = "https://unpkg.com/element-ui/lib/index.js" > < / script > <! - long shots -- > < script SRC = "https://cdn.bootcdn.net/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.js" > < / script > <! - use PDF document -- -- > < script SRC = "https://cdn.bootcdn.net/ajax/libs/jspdf/2.3.1/jspdf.es.min.js" > < / script > < script > new Vue ({ el: "#app", data() { return { }; }, methods: {// long screenshot screenshot() {var that = this; That.$confirm(' Do you want a long screenshot? ', 'confirmButtonText ', {confirmButtonText:' confirm ', cancelButtonText: 'cancel ', type: 'warning' }).then(() => { const loading = this.$loading({ lock: true, }); setTimeout(() => { html2canvas(document.getElementById("app"), { allowTaint: true, taintTest: true, useCORS: true, onrendered: function (canvas) { var url = canvas.toDataURL("image/png"); loading.close(); // that.uploadFile(url); var contentWidth = canvas.width; var contentHeight = canvas.height; // a PDF page displays the canvas height generated by the HTML page; Var pageHeight = contentWidth / 592.28 * 841.89; // Don't generate PDF HTML page height var leftHeight = contentHeight; Var position = 0; Var imgWidth = 595.28; // The size of the a4 paper [595.28,841.89], the width of the canvas generated by the HTML page in PDF. Var imgHeight = 592.28 / contentWidth * contentHeight; var pdf = new jsPDF('', 'pt', 'a4'); // There are two heights to distinguish, one is the actual height of the HTML page, and the page height of the generated PDF (841.89). If (leftHeight < pageHeight) {PDF. AddImage (url, 'JPEG', 0, 0, imgWidth, imgHeight); } else { while (leftHeight > 0) { pdf.addImage(url, 'JPEG', 0, position, imgWidth, imgHeight) leftHeight -= pageHeight; The position - = 841.89; // Avoid adding a blank page if (leftHeight > 0) {pdf.addPage(); }}} PDF. Save (' export name + (new Date ()). The getTime () + 'PDF'); // Export name}}); }, 500); = > {}). The catch () that the $message ({type: 'info', the message: 'cancelled'}); }); ,}}}); </script> </body> </html>Copy the code

To sum up is to convert the browser current page into PDF format, if you do not understand the message for you to answer

Finally, the official website of HTML2Canvas is attached: html2canvas.hertzen.com/