Shulou(Shulou.com)05/31 Report--

This article mainly explains "how to realize html to pdf with pure js". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn "pure js how to achieve html to pdf" bar!

1. Most browsers have this feature. However, what our customers want is not this, what they want is the export to pdf function that can be triggered actively in the system, so this kind of solution pass.

2. Use third-party tools. I found a solution that uses wkhtmltopdf as a tool to export. I tried it in our project, and it didn't work well, and the support for svg images was not good. Pass .

3. Another way is to use iText class to generate java files in the background. But because the page that needs to be exported is a dynamic page, and passing the page directly to the background will lose a lot of styles, it is still pass.

In the end, there is no good way, but to settle down and think about turning the html page into a picture first, and then exporting the picture to pdf. Because you want to support user export and download, and keep the style, it's best to have a pure js front-end implementation.

If you change html to canvas, use the js of html2canvas. There are more introductions on the Internet, so there is no nonsense here.

More troublesome is the svg picture, directly using html2canvas can not turn the content of the svg tag into canvas, and finally checked a circle of information, locked the canvg of this js. Canvg is a Google plug-in that converts svg tag content into canvas. Specific to our project, there is also a difficulty, that is, how to convert the font icon glyphicons to canvas, because the support for this font icon is completely different in different browsers. The final way to find out is to replace these font icons with char code and redraw them as canvas. There is no nonsense to generate pictures by canvas. Pdf generated by pictures is realized by jsPDF. After tossing about for most of the day, I finally got through the whole process, and then affixed the code step by step.

Step 1: replace all svg elements in the corresponding dom node with canvas

Svg2canvas: function (targetElem) {var svgElem = targetElem.find ('svg'); svgElem.each (function (index, node) {var parentNode = svg [XSS _ clean]; / / since the current IE does not support fetching content directly from the svg tag node, you need to coat the current tag with a layer of div to get var tempNode = document.createElement (' div'); tempNode.appendChild (node); var svg = tempNode [XSS _ clean] through the innerHTML attribute of the outer div Var canvas = document.createElement ('canvas'); / / convert canvg (canvas, svg); parentNode.appendChild (canvas);};}

Step 2: convert glyphicons fonts to canvas. If the glyphicons font icon is not used in the project, ignore this step

Glyphicons2canvas: function (targetElem, fontClassName, fontFamilyName) {var iconElems = targetElem.find ('.'+ fontClassName); iconElems.each (function (index, inconNode) {var fontSize = $(inconNode) .css ("font-size"); var iconColor = $(inconNode) .css ("color"); var styleContent = $(inconNode) .attr ('style'); / / remove "px" fontSize = fontSize.replace ("px", "); var charCode = getCharCodeByGlyphiconsName (iconName) Var myCanvas = document.createElement ('canvas'); / / increase the width and height of canva by 2 to display the full icon myCanvas.width = parseInt (fontSize) + 2; myCanvas.height = parseInt (fontSize) + 2; myCanvas.style = styleContent; var ctx = myCanvas.getContext (' 2d'); / / set the color of the drawing content ctx.fillStyle = iconColor; / / set the font size of the drawing and the name of font-family ctx.font = fontSize +'px'+ fontFamilyName Ctx.fillText (String.fromCharCode (charCode), 1, parseInt (fontSize) + 1); $(inconNode) .replaceWith (myCanvas);} / get the corresponding char codegetCharCodeByGlyphiconsName based on the class name of the glyphicons/glyphicon icon: function (iconName) {switch (iconName) {case ("glyphicons-resize-full"): return "0xE216"; case ("glyphicons-chevron-left"): return "0xE225"; default: return "";}}

Step 3: html to canvas, picture to pdf.

Html2canvas ($("# myExportArea"), {onrendered: function (canvas) {var imgData = canvas.toDataURL ('image/jpeg'); var img = new Image (); img.src = imgData / / set the pdf specification according to the size of the picture. If the image is loaded successfully, the reason is * 0.225 because of the scale problem img.onload = function () {/ / it should be noted here that the horizontal and vertical attributes of pdf need to be adjusted according to the ratio of width to height. Otherwise, there will be a problem of incomplete display if (this.width > this.height) {var doc = new jsPDF ('lump,' mm', [this.width * 0.225, this.height * 0.225]) } else {var doc = new jsPDF ('packs,' mm', [this.width * 0.225, this.height * 0.225]);} doc.addImage (imgData, 'jpeg', 0,0, this.width * 0.225, this.height * 0.225); / / different file names doc.save (' report_pdf_' + new Date (). GetTime () + '.pdf') depending on the download }, background: "# fff", / / the generated image is given a default background, otherwise, if your html root node does not have a background, it will be filled with black. AllowTaint: true / / avoid some unrecognized image interference. The default is false. If you encounter unrecognized image interference, you will stop processing html2canvas}). At this point, I believe you have a deeper understanding of "how to achieve html to pdf in pure js". You might as well do it in practice! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.