After stepping on the pit of H5 last time, ushered in the new requirement, need to generate PDF, including cover, table of contents, and then is the body, the content of the body includes, header, footer, chart, table, picture, map, many places according to the different field values have different display, that is, the content is not fixed.

The effect of the final realization

The cover

directory

The main content

Frame used

JSPDF (abandonment)

I found some problems about JSPDF on the Internet, such as rigid layout, inability to convert pictures and poor paging effect. And then they just dropped it. (JSPDF is also good, combined with HTML2Canvas, can also achieve some basic requirements, directory and header and footer implementation needs to be studied)

tcpdf(First Edition)

The company used this plug-in before, but it has not been maintained since 2005. When we wrote the first version, although the content was basically realized according to the requirements, of course, the implementation process was painful. First of all, all the layout can only use table layout, why not use padding and margin? At first, I thought that the front end could calculate the height of each title from the top by calculating the height of the generated PDF page, but, very inaccurate, dom calculation height and the final PDF generated height is very different

wkhtmltopdf(Final version)

This framework is good, simple and easy to use, basically supports most of the front-end CSS, except the directory has a pit (only the lower version supports paging, we are using wkHTMLTopDF 0.12.3 version), the cover needs to write a separate page, the directory can be generated as long as the command, the premise is that the corresponding code title should be wrapped with H1 tags. The resulting directory is fine except for the style, and clicking on the title of the directory can also jump to the page corresponding to the title. Here is the core code

Wkhtmltopdf --page-width 210mm --page-height 297mm --margin-top 15mm --header-left"Here's your watch, on the left." --header-right "[date] [time] Confidential Documents do not pass out" --header-line --header-spacing 3 --footer-spacing 3 --footer-center "- [page] page -"Here is the address of your pre-written cover toc-toc-header-text"Directory"Here is the address where you want to generate the PDF D:\\1.pdfCopy the code
// Page h1 tag <h1 class="item-title"> Project information </h1>Copy the code

Points to be aware of

Table is split across pages

The resulting PDF looks like this in the pagination

table{
    page-break-before: left;
}
Copy the code

Baidu map

I wanted to turn the map into a picture, but all the maps returned by Baidu map are HTML, and all the map pictures inside are pieced together one by one, even through HTML2Canvas screenshots are not good. Finally, let the back end view baidu map document, direct output map PNG link over.

Echarts chart

Since the chart is Cavans, we will convert it to a picture and assign it to an IMG tag

    let echartKLine = echarts.init(this.$el.querySelector('.js-kline'));
    echartKLine.setOption(_option);
    $("#"+this.mykey).attr("src", echartkline.getdataUrl ())// Use the getDataURL methodCopy the code

The watermark

Watermark found a simple method, is to the entire PDF outermost layer, through the method of background tiling.

.pdfContainer{
    background-image: url('Background image address');
    background-size: 300px;
}
Copy the code

Your local effect is a three-column watermark, which is what you want, but the result may only be two columns