Html pdf Chinese export solve the garbage problem in the correct posture

Brief introduction

As used herein, jspdf 1.5.3 version. GitHub Address: https://github.com/MrRio/jsPDF

jspdf is crooked nuts developed, therefore no thought to support a language other than English in a non-start, which led to the non-English text is garbled.

So there other chiefs to an increase of other solutions to the 1.5 version is also officially joined the non-English support solutions.

Solving ideas generally, to jspdf load other font libraries to enable normal output Chinese.

Packed font files

In the first step we need to start to download the source code from GitHub, because we need to use the tools which came with fontconverter.

Once you have downloaded we enter the fontconverterfolder can be seen in the following directory.

Direct the browser to open the fontconverter.htmlfile, you can see the following interface

Click to select "* .ttf" font file, and then click generation, you will get a js file. This file is to store the font file is converted into a string by base64 encoding the js file. The file used in the subsequent step.

Js file structure generated roughly as follows:

重点注意

1. Ttf font file only supports file formats, and differentiate font weight, if multiple weights of HTML text, you must load multiple fonts
2. fontName Field must be set to lowercase (bug reason for existence)
3. Good reminder: Do not use commercially licensed fonts, unless you have authorized, licensed commercial fonts such as: Microsoft elegant black

Siyuan font download: https://pan.baidu.com/s/14YAE8X_zZ0wMY19npGrwrg

Note: This download is only looking for a random blogger network disk pack connection, we recommend you to download the official website address.

Write test code

Prior to full application needs to do some tests, to avoid unnecessary detours. Test code as follows

<script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
    <script src='../../dist/jspdf.debug.js'></script>
    <script src="../../dist/sourcehansanscn-normal-normal.js"></script>
<script>
    var doc = new jsPDF({ orientation: 'p', format: 'a4' });
        doc.setFont('sourcehansanscn-normal', 'normal');
        doc.setFontSize(20);
        doc.html('<div style="font-faimly:sourcehansanscn-normal;">Chinese: 中文</div>', {
            callback: function (newDoc) {
                newDoc.save('chinese-html.pdf')
            }
        });

        doc.text("中文欢迎您", 1, 30);
        doc.save('chinese-pdf.pdf')
</script>

Because html pdf turn dependent html2canvas.jsand therefore need to load this file, github Address: https://github.com/niklasvh/html2canvas

After the code is derived here two pdf files, set up a Chinese font, is a direct use of the API jspdf pdf drawn directly, the other is to use htmlthe output pdf file.

重点注意：导出HTML需要在导出的HTML中对中文文本直接指定font-faimly，否者HTML导出的pdf仍会中文乱码

html pdf turn the code

If the above test code passed, you can write a formal export code.

html method definition:

html(HTMLelement|string,callback)

parameter:

• The first pass codes a parameter string of HTML or HTML nodes
• The second parameter is the HTML callback pdf complete turn, will pass parameters pdf callback object instance

Sample code is as follows:

<script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
    <script src='../../dist/jspdf.debug.js'></script>
    <script src="../../dist/sourcehansanscn-normal-normal.js"></script>
<script>
    var doc = new jsPDF({ orientation: 'p', format: 'a4' });
        doc.setFont('sourcehansanscn-normal', 'normal');
        doc.setFontSize(20);
        doc.html(document.body, {
            callback: function (newDoc) {
                newDoc.save('chinese-html.pdf')
            }
        });
</script>

export pdf to html page design considerations:

1. First by the global settings font-faimlyfor the Chinese font
2. After each inspection still try to export garbage element font-faimlywhether it is loaded Chinese fonts
3. Typefaces thickness, and if there is bold text, you need to load the corresponding bold font.
4. Because the package directly through js font file is very large, so not too much is too large, it may cause slow page loads and inadequate js memory.