Osheep

时光不回头,当下最重要。

pdfmake 导出PDF(中文+图片)

1.pdfmake的基本使用方法可以参考:

pdfmake官方地址:pdfmake
官网测试案例:测试案例
官网功能说明:组件说明

2.案例测试

说明:导出中文格式的pdf并且包含图片,步骤如下:

  • 导入js文件

pdfMake案例地址github地址

  • pdfmake.js
  • vfs_fonts.js(案例中已经解决中文乱码问题,以后可直接引用该文件)
《pdfmake 导出PDF(中文+图片)》

  • pdfMake.js

用于获取pdf.jsp文件中传过来要导出的内容,并且导出pdf,还可以执行回调函数

function pdfmake(content) {

    var dd = content;

    pdfMake.fonts = {
        Roboto: {
            normal: 'Roboto-Regular.ttf',
            bold: 'Roboto-Medium.ttf',
            italics: 'Roboto-Italic.ttf',
            bolditalics: 'Roboto-Italic.ttf'
        },
        微软雅黑: {
            normal: '微软雅黑.ttf',
            bold: '微软雅黑.ttf',
            italics: '微软雅黑.ttf',
            bolditalics: '微软雅黑.ttf',
        }
    };
    pdfMake.createPdf(dd).download("导出的PDF", function () {
    });
}
  • 插入图片

在插入图片时,pdfmake要求现将图片转换为Data URL才可以,而pdfmake允许直接指定路径,但是却是有条件的,必须在node.js作为服务器才可以。
下面代码工具用于转换图片为Data URL,并且将内容导出pdf

pdf.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <script src='build/pdfmake.min.js'></script>
    <script src='build/vfs_fonts.js'></script>
    <script src='js/jquery-3.2.0.min.js'></script>
    <script src='build/pdfMake.js'></script>
    <title>学生页面导出</title>
</head>
<body>

<div id="div2">div2的内容</div>
<button onclick="demo()">导出PDF</button>
</body>

<script type="text/javascript">
    function demo() {
        //图片格式转换
        var x = new ImageDataURL(["img/303733274.jpg"]);
        x.oncomplete = function () {
            var imgs = new Array();
            for (key in this.imgdata) {
                if (this.imgdata[key] == this.emptyobj) {
                    imgs.push({text: '请上传头像', fontSize: 10, rowSpan: 3});
                    continue;
                }//不存在的圖片直接忽略
                imgs.push({image: this.imgdata[key], fit: [100, 150], rowSpan: 3});//在的圖片直接忽略
            }
            var content = {
                content: [
                    {text: '学生档案', fontSize: 22, style: 'subheader', color: '#36B7AB', alignment: 'center'},
                    {text: '基本信息', fontSize: 15, style: 'subheader', color: '#36B7AB'},
                    {
                        style: 'tableExample',
                        table: {
                            widths: [100, 60, 55, '*', '*', '*', 100],
                            body: [
                                [{text: '学号:123456789123', fontSize: 8, margin: [0, 11, 0, 11]},
                                    {text: '姓名:张三', fontSize: 8, margin: [0, 11, 0, 11]},
                                    {text: '性别:男', fontSize: 8, margin: [0, 11, 0, 11]},
                                    {text: '民族:回族', fontSize: 8, colSpan: 2, margin: [0, 11, 0, 11]}, {},
                                    {text: '婚否:是', fontSize: 8, margin: [0, 11, 0, 11]},
                                    imgs[0]],
                                [{text: '身份证号:654125321453625478', fontSize: 8, colSpan: 2, margin: [0, 11, 0, 11]}, {},
                                    {text: '出生日期:1881-12-31', fontSize: 8, colSpan: 2, margin: [0, 11, 0, 11]}, {},
                                    {text: '入学前文化程度:高中', fontSize: 8, colSpan: 2, margin: [0, 11, 0, 11]}, {}],
                                [{text: '邮箱:23412341234@qq.com', fontSize: 8, colSpan: 2, margin: [0, 11, 0, 11]}, {},
                                    {text: '联系方式:123-4124-1243', fontSize: 8, colSpan: 2, margin: [0, 11, 0, 11]}, {},
                                    {text: 'QQ:23412341234', fontSize: 8, colSpan: 2, margin: [0, 11, 0, 11]}, {}],
                             //省略内容
                styles: {
                    header: {
                        fontSize: 18,
                        bold: true,
                        margin: [0, 0, 0, 10]
                    },
                    subheader: {
                        fontSize: 16,
                        bold: true,
                        margin: [0, 10, 0, 5]
                    },
                    tableExample: {
                        margin: [0, 5, 0, 15]
                    },
                    tableHeader: {
                        bold: true,
                        fontSize: 13,
                        color: 'black'
                    }
                },
                defaultStyle: {
                    font: '微软雅黑'
                }
            }
            pdfmake(content);
        }
    }
</script>

<script>
    function ImageDataURL(urls) {//urls必須是字符串或字符串數組
        this.completenum = 0;
        this.totalnum = 0;
        this.imgdata = new Array();
        this.emptyobj = new Object();
        this.oncomplete = function(){};
        this.getDataURL = function(url, index) {
            var c = document.createElement("canvas");
            var cxt = c.getContext("2d");
            var img = new Image();
            var dataurl;
            var p;
            p = this;
            img.src = url;
            img.onload = function() {
                var i;
                var maxwidth = 500;
                var scale = 1.0;
                if (img.width > maxwidth) {
                    scale = maxwidth / img.width;
                    c.width = maxwidth;
                    c.height = Math.floor(img.height * scale);
                } else {
                    c.width= img.width;
                    c.height= img.height;
                }
                cxt.drawImage(img, 0, 0, c.width, c.height);

                p.imgdata[index] = c.toDataURL('image/jpeg');
                for (i = 0; i < p.totalnum; ++i) {
                    if (p.imgdata[i] == null)break;
                }
                if (i == p.totalnum) {
                    p.oncomplete();
                }
            };
            img.onerror = function() {
                p.imgdata[index] = p.emptyobj;
                for (i = 0; i < p.totalnum; ++i) {
                    if (p.imgdata[i] == null)break;
                }
                if (i == p.totalnum) {
                    p.oncomplete();
                }
            };
        }
        if (urls instanceof Array) {
            this.totalnum = urls.length;
            this.imgdata = new Array(this.totalnum);
            for (key in urls) {
                this.getDataURL(urls[key], key);
            }
        } else {
            this.imgdata = new Array(1);
            this.totalnum = 1;
            this.getDataURL(urls, 0);
        }
    }
</script>
</html>

《pdfmake 导出PDF(中文+图片)》

导出结果
点赞