欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

pdfmake的使用以及对中文的支持

程序员文章站 2022-05-06 09:39:39
...

前言

这次项目有个需求是需要导出pdf。但是jspdf这个插件对中文支持不够友好,用html的canvas转图片后还是很模糊。几经周转选用了pdfmake插件。
目前为止有以下几个优点:
1.直接在前端导出pdf,当然也可以和后端交互;
2.支持中文,当然这点是 最最最最最 重要的
3.易上手,只需看几下文档
4.项目一直在更新和维护


介绍

pdfmake是用来导出pdf的js插件,使用gulp进行自动化构建(用于更改字体支持中文时使用)

github: bpampuch/pdfmake
doc: document

可以在github下载整个工程,比较重要的是两个文件:

pdfmake.min.js (pdfmake/build/pdfmake.min.js )
vfs_fonts.js(pdfmake/build/vfs_fonts.js,与支持中文有关)


使用以及对中文的支持

使用

pdfmake使用比较简单,引入pdfmake.min.js 和vfs_fonts.js。

pdf中的文件内容:

 var docDefinition = { content: 'This is an sample PDF printed with pdfMake' };

内容的样式(这个挺好用的):

 styles: {
            per_info_header: {
                 fontSize: 24,
                 alignment: 'center'
             },
             per_info: {
                 alignment: 'center'
             }
         }

还有对图片的支持(注:图片模糊的话可以转成base64,在放到pdf里会清晰很多,这是部长研究出来的666

详细用法看文档即可, 比较重要的还有github上的issue, 比如在pdf中画直线就可以在issue中找到方法。

对中文支持

 ̄へ ̄ 扯了这么多终于到重点了!
思路
1.加中文字体文件:xx.ttf到 pdfmake\examples\fonts 目录下;
2.然后通过gulp的 gulp buildFonts命令,在命令行下pdfmake文件夹中 将字体打包成vfs_fonts.js文件;没安装gulp的可以看下这篇教程:gulp详细入门教程
3.再将vfs_fonts.js放到自己工程的js文件夹里即可。
ps:不知道怎么找中文字体的同学可以这样,控制面板(查看方式为:类别)-> 外观和个性-> 字体 ,然后找自己要的字体即可,这里放一下我使用的微软雅黑和宋体的字体

pdfmake的使用以及对中文的支持

这样就能在js中对需要的字体进行引用:

/*设置默认字体*/
defaultStyle: {
    font: 'msyh'
}

/*设置字体*/
pdfMake.fonts = {
     Roboto: {
         normal: 'Roboto-Regular.ttf',
         bold: 'Roboto-Medium.ttf',
         italics: 'Roboto-Italic.ttf',
         bolditalics: 'Roboto-Italic.ttf'
     },
     /*这里是加入的微软雅黑字体*/
     msyh: {
         normal: 'msyh.ttf',
         bold: 'msyh.ttf',
         italics: 'msyh.ttf',
         bolditalics: 'msyh.ttf',
     }
 };

放一个代码示例:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>my first export PDF</title>
    <script src="build/pdfmake.min.js"></script>
    <script src="build/vfs_fonts.js"></script>
    <script>
        function down() {
            var dd = {
                pageSize:'A4',

                content: [
                    'This paragraph fills full width, as there are no columns. Next paragraph however consists of three columns',
                    {
                        columns: [
                            {
                                // auto-sized columns have their widths based on their content
                                width: 'auto',
                                text: 'First column'
                            },
                            {
                                // star-sized columns fill the remaining space
                                // if there's more than one star-column, available width is divided equally
                                width: 'auto',
                                text: 'Second column'
                            },
                            {
                                // fixed width
                                width: 'auto',
                                text: 'Third column'
                            },
                            {
                                // percentage width
                                width: '10%',
                                text: 'Last column'
                            }
                        ],
                        // optional space between columns
                        columnGap: 10
                    },
                    'This paragraph goes below all columns and has full width'
                ],


                defaultStyle: {
                    font: 'msyh'
                },
                styles: {
                    per_info_header: {
                        fontSize: 24,
                        alignment: 'center'
                    },
                    per_info: {
                        alignment: 'center'
                    }
                }
            };
            pdfMake.fonts = {
                Roboto: {
                    normal: 'Roboto-Regular.ttf',
                    bold: 'Roboto-Medium.ttf',
                    italics: 'Roboto-Italic.ttf',
                    bolditalics: 'Roboto-Italic.ttf'
                },
                msyh: {
                    normal: 'msyh.ttf',
                    bold: 'msyh.ttf',
                    italics: 'msyh.ttf',
                    bolditalics: 'msyh.ttf',
                }
            };
            pdfMake.createPdf(dd).download("test.pdf");
        }
    </script>
</head>
<body>
<button onclick="down()">下载</button>
</body>
</html>

结尾

大概就是酱紫啦。最重要的是修改字体以支持中文这点很好哇~

相关标签: 前端 插件