JS Export PDF Plug-in method (support Chinese, picture use path) _javascript tips

On the web to do an export PDF function, found that jspdf more people recommend, unfortunately does not support Chinese, and finally found Pdfmake, very good to solve the problem. Its effect can be viewed first to http://pdfmake.org/playground.html. In the course of use, it is also found that the insertion of pictures is a relatively cumbersome thing.

To solve these problems, the main contents of this paper can be divided into three parts:

The basic use method of Pdfmake;
• How to solve Chinese problems;
• How to insert a picture by specifying a picture address.

The basic use method of Pdfmake

1. Contains the following two documents

 <script src= "Build/pdfmake.min.js" ></script>
  <script src= "Build/vfs_fonts.js" ></script >

2. In the JS code to declare a Document-definition object, this is pdfmake own terminology. To put it simply, you create an object that contains at least the content attribute. You can then invoke the Pdfmake method to export the PDF, as shown in the following code:

<script type= "Text/javascript" >
 //Create Document-definition object 
 var dd = {
      content: [
       ' One Paragraph ',
       ' Another paragraph, this time a little bit longer to make sure, this line'll be divided into at least TW O lines '
       ]
    };
 Export PDF
 Pdfmake.createpdf (dd). Download ();
 </script>

By following the example, you can see the prompt file download. For a complete tutorial on Pdfmake, please login to Pdfmake project view.

Pdfmake Support Chinese

Three steps:

1. To the Pdfmake project website, download the project and then enter the project directory to put the font files (such as Microsoft Jas. TTF) into the Examples/fonts directory, and then use grunt Dump_dir to generate new vfs_fonts.js files;

From the above described that the project is through the grunt management, if no relevant knowledge, please go online first tutorial.

The Grunt Dump_dir command packs all the files in the fonts directory, so no unwanted files are included.

Microsoft Jas. TTF on the Internet a lot, Windows computer system disk storage fonts are also found in the directory.

2. Back to their example code, JS code to modify the Pdfmake fonts object, declaring the current to use the font:

 pdfmake.fonts = {
      Roboto: {
        normal: ' Roboto-regular.ttf ',
        bold: ' Roboto-medium.ttf ',
        italics: ' Roboto-italic.ttf ',
        bolditalics: ' Roboto-italic.ttf '
      },
      Microsoft Jas: {
        normal: ' Microsoft Ya-black. Ttf ',
        Bold: ' Microsoft Jas. ttf ',
        italics: ' Microsoft Jas. TTF ',
        bolditalics: ' Microsoft ya black. Ttf ',
      }
    ;

3.document-definition object to declare the font to be used by default, specifically: To declare an object, in addition to the content attribute, there is also a DefaultStyle property, the DefaultStyle below also has a font property:

var dd = {
      content: [
       ' Test in English ',
       ' Another paragraph, this time a little bit longer to make sure, the this line WI ll be divided in least two lines '
       ,
       defaultstyle: {
         font: ' Microsoft Ya Black '
       }
    };

The following is a complete example of the source code based on the above steps:

<! DOCTYPE html>  

Insert Picture

In terms of inserting a picture, jspdf requires that the picture be converted to a data URL, and Pdfmake allows you to specify the path directly, which is convenient, but conditional, must be node.js as a server, or place the picture in Vfs_ Fonts.js, so in general, is not very useful, or the same should be converted to the image of the data URL form.

To solve this problem, I wrote a Imagedataurl function object that can pass in multiple picture addresses at the same time. After the pictures are loaded, Imagedataurl.oncomplete will be triggered, in the callback through the This.imgdata to remove the data URL of each picture, according to the requirements of Pdfmake organization, the PDF can be generated correctly.

The principle of imagedataurl is to draw the picture on canvas through the canvas tag of H5, and then get the data URL of the image through canvas todataurl. Note Browser compatibility issues when using.

The following is an example of a PDF that will be sampleimage.jpg, Sampleage.jpg, sampleimage.jpg, which is not present when the test is sampleage.jpg, and is directly ignored by the PDF.

<! DOCTYPE html>  

Above this JS export PDF plug-in method (support Chinese, picture use path) is small to share all the content of everyone, I hope to give you a reference, but also hope that we support cloud habitat community.