Shulou(Shulou.com)06/01 Report--

In this article, the editor introduces in detail "how to use html canvas to achieve web screenshot and embed into PDF", the content is detailed, the steps are clear, and the details are handled properly. I hope this article "how to use html canvas to achieve web screenshot and embed into PDF" can help you solve your doubts.

The principle of canvans is to draw dom nodes in Canvas, which is very convenient, but there are still some limitations. Such as:

Iframe is not supported

Cross-domain images are not supported

SVG images are not supported on some browsers

Flash is not supported

Ancient browsers and below IE9 are not supported.

Function canvasImg (divName,formName,actionType) {

Html2canvas (divName, {

Onrendered: function (canvas) {

Var myImage=canvas.toDataURL ("image/jpeg")

/ / dynamically generate input box

Var input1=document.createElement ('input')

Input1.setAttribute ('type',' hidden')

Input1.setAttribute ('name',' canvasImg')

Input1.setAttribute ('value',myImage)

FormName.appendChild (input1)

FormName.actionType.value=actionType

FormName.submit ()

}

})

}

Here I extract that the public JS,divName is $('# id') to take the DOM object that needs to be screenshot. The canvas object called back after function (canvas) rendering is the name of the form form, and actionType is the name of the action method. Here, I will get the screenshot, encode it with Base64, and then obtain it in the background through the post request.

Data is the base64-encoded picture data that writes the picture to the file stream.

The PDF usage here is IText generation.

If the picture is too large, it must be paged. But the result is a large picture, and Itext cannot page it automatically. There are two kinds of ideas in the pagination. One is to use a virtual printer to paginate the picture and then export it. The second is to cut the large image into small images, which depends on the size ratio of the image segmentation. Here I have only implemented the second way, so I will only explain the second way.

Read here, this article "how to use html canvas to achieve web screenshots and embed into PDF" article has been introduced, want to master the knowledge of this article also need to practice and use in order to understand, if you want to know more related articles, welcome to follow the industry information channel.

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.