html2canvas + jspdf achieve turn pdf html

In the front-end development, html pdf turn is the most common needs and achieve develop html2canvas and jspdf this demand is the most commonly used two plug-ins, plug-ins are readily available, but sometimes with good, not a lot of headaches :

1. The resulting pdf is not high definition, vague;

2. Multi-page pdf appear content to split the case, especially when the text is divided, very friendly experience;

3. When the page wider or longer, or circumstances pdf generated content appears incomplete.

 

If you appear in the above project, then do not worry, look down on the right, the following code for you to solve all

Man of few words said, directly on the code:

 

/ * 
 * @Description: converted to HTML and download the pdf 
 * @author: cmyoung 
 * @date: 2018-08-10 19:07:32 
 * @LastEditTime: 2019-08-23 16:34:18 
 * / 

/ * * 
 * @param html {String} DOM tree 
 * @param isOne {Boolean} if no default single-page (to false) 
 * {pdf file format @return} 
 * /
 
'use strict' 
Import * aS jsPDF from 'jspdf' 
Import from html2canvas 'html2canvas' 

Export default the async (HTML, isOne) => { 
  the let the contentWidth = html.clientWidth // get width of the container 
  the let contentHeight = html.clientHeight // get high the container
  Canvas = document.createElement the let ( 'Canvas' ) 
  the let Scale = 2   // solve the problem definition, the first factor of 2 

  canvas.width = * Scale the contentWidth // canvas width twice as high amplification && 
  canvas.height = contentHeight * Scale 
  canvas.getContext ( '2D' ) .scale (Scale, Scale) 

  the let the opts = { 
    Scale: Scale, 
    Canvas: Canvas, 
    width: the contentWidth, 
    height: contentHeight, 
    useCORS: to true 
  } 

  return html2canvas (HTML, the opts) .then (Canvas => { 
    the let PageData = canvas.toDataURL ( 'Image / JPEG', 1.0) //Definition 0 -. 1 
    the let PDF 

    IF (isOne) {
       // Leaflet 
      the console.log (the contentWidth, 'the contentWidth' ) 
      the console.log (contentHeight, 'contentHeight' ) 

      // jspdf.js widget high limit of the maximum width of a single page to 14400 
      the let limit = 14400 IF (contentHeight> limit) { 
        the let contentScale = limit / contentHeight 
        contentHeight = limit 
        the contentWidth = * contentScale the contentWidth 
      } 
      the let Orientation = 'P'
       //

      
In jspdf source, if a orientation = 'p' and the width> when the height, width and height values will exchange 
      // similarly modified to the value orientation 'l', and vise versa. 
      IF (the contentWidth> contentHeight) { 
        Orientation = 'L' 
      } 

      // Orientation Possible values are "Portrait" or "Landscape" (Shortcuts or "P" or "L") 
      PDF = new new jsPDF (Orientation, 'Pt', [the contentWidth , contentHeight]) // download a4 paper size ratio 

      // pdf.addImage (PageData, 'the JPEG', left, top, width, height) disposed 
      pdf.addImage (PageData, 'the JPEG', 0, 0 , the contentWidth,

      = pageHeight the let (the contentWidth / 552.28) * 841.89 // not generated pdf html page height of 
      the let leftHeight = contentHeight
       // page offset 
      the let position = 0 // size paper a4 [595.28,841.89], html page generated in canvas pdf of the image width and height of 
      the let = 555.28 imgWidth 
      the let imgHeight = (imgWidth / the contentWidth) * contentHeight 
      pdf = new new jsPDF ( '', 'Pt', 'a4') // download a4 paper size ratio // there are two highly desirable distinction, the actual height of a html page, and generating the pdf page height (841.89) // if content does not exceed the range of a pdf displayed without paging iF (leftHeight < pageHeight) { 
        pdf.addImage (PageData,
      
      

      
      
      'JPEG', 20, 0, imgWidth, imgHeight)
      } else {
        while (leftHeight > 0) {
          pdf.addImage(pageData, 'JPEG', 20, position, imgWidth, imgHeight)
          leftHeight -= pageHeight
          position -= 841.89
          //避免添加空白页
          if (leftHeight > 0) {
            pdf.addPage()
          }
        }
      }
    }
    return pdf
  })
}

 

The above method support, the resulting single-page or multi-page pdf is optional, if not demand must be multi-page, single page choose to generate recommendations, why?

Because a single page where the content will not appear divided or text.

However, if the content is too long over 14,400, then you will find something other than acquiring less than 14400, and this is why? It seems jspdf find the answer after the source, the source code there are restrictions:

 

 

 However, my code has solved the problem for too long (usually no more than the width of the special scene will not consider), when more than 14,400, according to the height of 14400 to count on the scale, the width of the scaling like on the line, which get away?

No, no, there seems to pit, is orientation, there are two values ​​"portrait" or "landscape", the default is 'p', when orientation = 'p' and the width> height, he would default width and height values exchange, if you do not want him to exchange, then when your width when height, you dynamically change the orientation> 'l' can be, and vice versa.

 

 

 

I hope more useful to you, thank you!