html如何转pdf


本文摘自PHP中文网,作者醉折花枝作酒筹,侵删。

本篇文章给大家介绍html转pdf的方式。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

1、准备资源

itext.jar

1

www.baidu.com

html2canvas.js

1

www.baidu.com

2、前端代码:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

//进行截图操作,document.querySelector("body") 为要截图的区域

 function test() {

        html2canvas(document.querySelector("body"), {

            onrendered: function (canvas) {

                var dataUrl = canvas.toDataURL('image/png');

                var formData = new FormData(); //模拟表单对象

                formData.append("imgData", convertBase64UrlToBlob(dataUrl)); //写入数据

                var xhr = new XMLHttpRequest(); //数据传输方法

                xhr.open("POST", "http://localhost:8080/pdf"); //配置传输方式及地址

                xhr.send(formData);

                xhr.onreadystatechange = function () { //回调函数

                };

            }

        });

    }

 

    //格式化图片base64编码转换为byte文件流

    function convertBase64UrlToBlob(urlData){

        //去掉url的头,并转换为byte

        var bytes=window.atob(urlData.split(',')[1]);

        //处理异常,将ascii码小于0的转换为大于0

        var ab = new ArrayBuffer(bytes.length);

        var ia = new Uint8Array(ab);

        for (var s = 0;s<bytes.length;s++){

            ia[s] = bytes.charCodeAt(s);

        }

        return new Blob( [ab] , {type : 'image/png'});

    }

     

    <body onclick="test()">//调用截图方法即可

阅读剩余部分

相关阅读 >>

Html根节点是什么

Html中src是什么意思

Html中文本下面怎么有虚线

div标签:水平居中和垂直居中的实现(附代码)

Html标签失效怎么办

Html怎么让图片居中

Html基础知识,关于超链接设置的样式的详细介绍

Html列表快速预览

Html表格边框

Html怎么隐藏文字

更多相关阅读请进入《Html》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...