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

最新推荐文章于 2024-02-28 10:28:51 发布

y4ung

最新推荐文章于 2024-02-28 10:28:51 发布

阅读量1.1w

点赞数 6

分类专栏：工具及插件的使用文章标签：前端插件

本文链接：https://blog.csdn.net/qq_35056292/article/details/75783392

版权

工具及插件的使用专栏收录该内容

9 篇文章 0 订阅

订阅专栏

前言

这次项目有个需求是需要导出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:不知道怎么找中文字体的同学可以这样，控制面板（查看方式为：类别）-> 外观和个性-> 字体，然后找自己要的字体即可，这里放一下我使用的微软雅黑和宋体的字体

这里写图片描述

这样就能在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>

结尾

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

y4ung

关注

6
点赞
踩
10

收藏

觉得还不错? 一键收藏
35
评论
pdfmake的使用以及对中文的支持

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

扫一扫