JS Export page is a PDF file, how to do it? Take a look and you'll understand!

Tag: Copy settings innerHTML scroll bar copy span jquery Remove als

Nonsense not much to say, directly on the code.

1. resource files or dependencies

<script type= "Text/javascript" src= "./js/canvg2.js" ></script>
<script type= "Text/javascript" src= "./js/html2canvas-0.4.1.js" ></script>
<script type= "Text/javascript" src= "./js/jspdf.min.js" ></script>
<script type= "Text/javascript" src= "./js/jquery-2.1.4.min.js" ></script>    

2. HTML code

<div class= "Container" >
    <input id= "downloadpdf" type= "button" value= "Download PDF"/>
</div>
<div id= "Pdfcontainer" class= "container" >                      export range is the area where the div with the ID pdfcontainer is located
    <div> Click on the button above and the contents of the Blue box area will be exported to pdf.</div>
</div>

3. JS Code

<script type= "Text/javascript" >
$ (function () {
$ ("#downloadPdf"). Click (function () {
var targetdom = $ ("#pdfContainer");
Clone a copy of the PDF you want to export so that it can be converted, fine-tuned, etc. without affecting the original interface
var copydom = Targetdom.clone ();
The new div width is the same as the original, and the height is set to adaptive so that all the contents of the node can be fully displayed (for example, the contents of the table scroll bar)
Copydom.width (Targetdom.width () + "px");
Copydom.height (Targetdom.height () + "px");

$ (' body '). Append (copydom)//ps: Here must first copydom append to the body, and then the subsequent Glyphicons2canvas processing, otherwise it will cause the icon is empty

Svg2canvas (Copydom);
Html2canvas (Copydom, {
Onrendered:function (Canvas) {
var imgdata = Canvas.todataurl (' image/jpeg ');
var img = new Image ();
IMG.SRC = Imgdata;
According to the size of the picture to set the PDF specifications, to be executed when the picture is loaded successfully, the reason is *0.225 because of the scale problem
Img.onload = function () {
It is important to note that the PDF is horizontally and vertically two properties that need to be adjusted according to the ratio of the width to height, or there will be an incomplete display problem.
if (This.width > This.height) {
var doc = new Jspdf (' l ', ' mm ', [this.width * 0.225, This.height * 0.225]);
} else {
var doc = new Jspdf (' P ', ' mm ', [this.width * 0.225, This.height * 0.225]);
}
Doc.addimage (imgdata, ' jpeg ', 0, 0, this.width * 0.225, This.height * 0.225);
Save to a different file name according to the download
Doc.save (' pdf_ ' + new Date (). GetTime () + '. pdf ');
};
Delete the copied Div
Copydom.remove ();
},
Background: "#fff",
This gives the generated picture the default background, otherwise, if your HTML root node does not set the background, it will be filled with black.
Allowtaint:true//Avoid some unrecognized image interference, default is False, encounter unrecognized picture interference will stop processing Html2canvas
});
});
});

function Svg2canvas (Targetelem) {
var Svgelem = targetelem.find (' svg ');
Svgelem.each (function (Index, node) {
var parentnode = Node.parentnode;
Because now IE does not support directly to the SVG tag node fetching content, so need to set a layer of div outside the current tag, through the outer Div's innerHTML property to get
var tempnode = document.createelement (' div ');
Tempnode.appendchild (node);
var svg = tempnode.innerhtml;
var canvas = document.createelement (' canvas ');
Transformation
CANVG (canvas, SVG);
Parentnode.appendchild (canvas);
});
}

function Glyphicons2canvas (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 of the Canva by 2 to show the complete 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 the font-family
Ctx.font = fontSize + ' px ' + fontfamilyname;
Ctx.filltext (String.fromCharCode (CharCode), 1, parseint (fontSize) + 1);
$ (Inconnode). ReplaceWith (MyCanvas);
});
}
Gets the corresponding char code according to the class name of the Glyphicons/glyphicon icon
function Getcharcodebyglyphiconsname (iconname) {
Switch (iconname) {
Case ("Glyphicons-resize-full"):
return "0xe216";
Case ("Glyphicons-chevron-left"):
return "0xe225";
Default
Return "";
}
}
</script>




The above perfect implementation of your export PDF issue. Code Base Address:
Https://github.com/zhangshaoliang/downLoadPDF

JS Export page is a PDF file, how to do it? Take a look and you'll understand!