One requirement I encountered today was to export the page’s Echarts charts and tables in PDF format

< script SRC = "https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js" > < / script > < script SRC = "https://cdn.bootcss.com/jspdf/1.3.4/jspdf.debug.js" > < / script > < script > function TOPDF () {var title = 'multi-sectoral contrast analysis' Html2canvas (document.getelementById ('export_content'), {dpi: 172, // Export PDF clarity // onRendered: // var pageData = canvas.todataURL ('image/jpeg', 1.0); // var PDF = new jsPDF(", 'pt', 'a4'); // var PDF = new jsPDF(", 'pt', 'a4'); AddImage (pageData, 'JPEG', 0, 0, 595.28, 592.28 / cancanvas. Width * cancanvas. Height); // pdf.save(title+'.pdf'); },// Export PDF clarity onRendered: Function (canvas) {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 var leftHeight = contentHeight Position = 0 // Width and height of the canvas image in the PDF generated by the HTML page (a4 paper size [595.28,841.89]) var imgWidth = 595.28 var imgHeight = (592.28 / ContentWidth) * contentHeight var pageData = canvas. ToDataURL ('image/ JPEG ', 1.0) 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) // When the content does not exceed the size of the PDF page, If (leftHeight < pageHeight) {PDF. AddImage (pageData, 'JPEG', 0, 0, imgWidth, imgHeight) } else { while (leftHeight > 0) { pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, ImgHeight) leftHeight -= pageHeight Position -= height if (leftHeight > 0) {pdf.addPage()}} PDF. Save (title + '.pdf')}, // set background to white (default black) background: '# FFF '})} </script>Copy the code

However, it is generally controlled with the addition of extra buttons in the Echarts chart. The specific configuration is

Option = {Toolbox: {feature: {myTool1: {// Selfbuttons can be named show: true, // whether to display title: 'Export EXCLE', // mouse over the displayed text icon: 'image:// /web/images/excel-ext.png', // icon option: {}, onclick: Function () {ToExcle()}} myTool2: function() {ToExcle(); Selfbuttons show: true, // Whether to display title: 'export PDF', // move the mouse to display the text icon: 'image:// /web/images/ pdF-ext.png ', // icon option: {}, onclick: Function () {function() {// Click on the event, where option1 is chart information TOPDF() // here you can add your own processing code, switch different graphics}}}}}Copy the code

Go to ali vector icon library to find the icon you want, get to the configuration item inside.

However, there is a bug that the content may not be completely displayed after the PDF is exported, because the height in the PDF is not dynamically calculated, so the content is not completely displayed. In this case, you can add a line of code to calculate the sum of the heights of the table and echarts chart and then assign the height configuration item, which is the value of Cancanvas. Height.

    allowTaint: true,
    height: $('#table').outerHeight() + $('#echarts').outerHeight()
Copy the code