转载：点击查看原文

pdfmake.js是一个简单的生成pdf文件的插件。

pdfmake.js     https://files.cnblogs.com/files/s313139232/pdfmake.min.js

代码也很简单：

html文件：

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="utf-8">

    <title>my first export PDF</title>

    <script src="pdfmake.min.js"></script>

    <script src="vfs_fonts.js"></script>

    <script>

        function down() {

            var dd = {

                content: [

                    '中英文测试',

                    'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines'

                ],

                defaultStyle: {

                    font: '方正姚体'

                }

            };

            pdfMake.fonts = {

                Roboto: {

                    normal: 'Roboto-Regular.ttf',

                    bold: 'Roboto-Medium.ttf',

                    italics: 'Roboto-Italic.ttf',

                    bolditalics: 'Roboto-Italic.ttf'

                },

                方正姚体: {

                    normal: 'FZYTK.TTF',

                    bold: 'FZYTK.TTF',

                    italics: 'FZYTK.TTF',

                    bolditalics: 'FZYTK.TTF',

                }

            };

            pdfMake.createPdf(dd).download();

        }

    </script>

</head>

<body>

<button onclick="down()">下载</button>

</body>

</html>

代码中会引用两个技术，pdfmake.min.js   vfs_fonts.js

　　其中pdfmake.min.js是pdfmake的支持文件，而vfs_fonts.js是字体文件（.ttf）打包成的js文件。

content中pdf的内容拼接：
　　内容拼接类似于html+css，但是写法为pdfmake插件自带，可以去pdfmake的github首页介绍中查看。

字体文件（.ttf）打包可以通过pdfmake的github上的源文件进行打包制作。

下面是两种字体的vfs_fonts.js文件：

方正姚体  https://files.cnblogs.com/files/s313139232/方正姚体vfs_fonts.js

Roboto-Itali   https://files.cnblogs.com/files/s313139232/Roboto-Italivfs_fonts.js

注意：中文的字体文件较大，打包出来多数都在10M以上，推荐方正姚体等ttf文件较小的字体进行打包。

打包教程：http://www.cnblogs.com/xrab/p/7210588.html

打包步骤：

1.在https://github.com/bpampuch/pdfmake下载pdfmake的源文件

2.在根目录用 npm 安装 gulp

npm install gulp --save-dev

3.安装pdfmake依赖包

npm install

4.在cmd运行打包examples/fonts中的.ttf文件的命令。

gulp buildFonts

如果运行上面的命令后，报 什么  apply 什么的  一个错误， 就 npm i gulp-cli -g  一下 ，应该就好了。

5.然后在 build 文件中可以找到vfs_fonts.js文件。

由于字体打包文件较大，建议examples/fonts中的.ttf文件只放置一个字体文件。

前端生成pdf文件之pdfmake.js的更多相关文章

  1. 前端生成PDF，让后端刮目相看

    PDF 简介 PDF 全称Portable Document Format (PDF)(便携文档格式),该格式的显示与操作系统.分辨率.设备等因素没有关系,不论是在Windows,Unix还是在苹果公 ...

  2. 在js内生成PDF文件并下载的功能实现(不调用后端),以及生成pdf时换行的格式不被渲染,word-break:break-all

    在js内生成PDF文件并下载的功能实现(不调用后端),以及生成pdf时换行的格式不被渲染,word-break:break-all 前天来了个新需求, 有一个授权书的文件要点击下载, 需要在前端生成, ...

  3. PDF.Js的使用—javascript中前端显示pdf文件

    PDF.Js的使用—javascript中前端显示pdf文件 写于2018/12/6 起因是一个图片展示页面需要展示pdf格式的文件,所以查了半天决定使用pdf.js,我也不求有多了解它,能实现我想要 ...

  4. 纯前端导出pdf文件

    纯前端js导出pdf,已经用于生产环境. 工具: 1.html2canvas,一种让html转换为图片的工具. 2.pdfmake或者jspdf ,一种生成.编辑pdf,并且导出pdf的工具. pdf ...

  5. Itext生成pdf文件

    来源:https://my.oschina.net/lujianing/blog/894365 1.背景 在某些业务场景中,需要提供相关的电子凭证,比如网银/支付宝中转账的电子回单,签约的电子合同等. ...

  6. 根据PDF模板生成PDF文件(基于iTextSharp)

    根据PDF模板生成PDF文件,这里主要借助iTextSharp工具来完成.场景是这样的,假如要做一个电子协议,用过通过在线填写表单数据,然后系统根据用户填写的数据,生成电子档的协议.原理很简单,但是每 ...

  7. 在C#.NET中，如何生成PDF文件？主要有以下几个途径

    1．使用.NET文件流技术:若通过.NET的文件流技术生成PDF文件,必须对PDF文件的语法很清楚,例如BT表示实体内容开始:ET表示实体内容结束:TD表示换行等等.我们可以从Adobe的官方网站上下 ...

  8. linux下编译bib、tex生成pdf文件

    实验: 在linux环境下,编译(英文)*.bib和*.tex文件,生成pdf文件. 环境: fedora 20(uname -a : Linux localhost.localdomain 3.19 ...

  9. ThinkPHP3.2.3扩展之生成PDF文件（MPDF）

    目前是PHP生成PDF文件最好的插件了,今天介绍下在ThinkPHP3.2.3里如何使用. 先安照路径放好如图. 下面是使用方法 public function pdf(){ //引入类库 Vendo ...

随机推荐

  1. Springboot(一)概念

    一.概念 Spring boot 用来简化新Spring应用的初始搭建和开发配置. 二.特性 1.创建独立的Spring应用程序,不是对spring功能增强,而是提快速使用Spring的功能: 2.嵌 ...

  2. zabbix系列 ~ mongo监控相关

    ,一 简介: 我们来谈谈mongo的监控二 核心命令    rs.status() 关注复制集群是否健康    db.serverStatus() 关注实例整体性能三 目标解读   主要来解读下db. ...

  3. Social Grouping for Multi-Target Tracking and Head Pose Estimation in Video（翻译）

    0 - ABSTRACT 许多计算机任务在缺少上下文信息的情况下的处理会更加困难.例如,在多相机跟踪任务下,行人可能在不同照相机下面因为有这不同的姿势和灯光条件而看起来很不一样.类似地,在低分辨率高角 ...

  4. 实现Comet(服务器推送)的两种方式：长轮询和http流

    Comet 是一种高级的Ajax技术,实现了服务器向页面实时推送数据的技术,应用场景有体育比赛比分和股票报价等. 实现Comet有两种方式:长轮询与http流 长轮询是短轮询的翻版,短轮询的方式是:页 ...

  5. LaTeX IEEE模板

    因为课程作业的要求需要完成一篇IEEE格式的论文,所以选择入门LaTeX.但是期间遇到了各种各样莫名其妙的坑.前前后后挣扎了两个多星期终于完成了IEEE模板的设置.下面详细记录一下让我深恶痛绝的心路历 ...

  6. Django实战(一)-----用户登录与注册系统6（session会话、注册视图）

    因为因特网HTTP协议的特性,每一次来自于用户浏览器的请求(request)都是无状态的.独立的. 通俗地说,就是无法保存用户状态,后台服务器根本就不知道当前请求和以前及以后请求是否来自同一用户.对于 ...

  7. 1-OSI七层模型详解

    1.网络协议种类 市面上存在4,5,7层协议. 1.1 国际标准化组织ISO发布的OSI 7层协议模型(即OSI开放式互联参考模型),是概念性模型. 1.2 TCP/IP是一种实践类的模型,已成为行业 ...

  8. sudo su 和 sudo -s【转】

    sudo su 和 sudo -s 都是切换到root用户,不同的是 sudo su 环境用的是目标用户 (root)的环境 sudo -s 环境用的是当前用户本身的环境 转自 sudo su 和 s ...

  9. 深度神经网络（DNN）是否模拟了人类大脑皮层结构？

    原文地址:https://www.zhihu.com/question/59800121/answer/184888043 神经元 在深度学习领域,神经元是最底层的单元,如果用感知机的模型, wx + ...

  10. Linux系统平均负载3个数字的含义

    越来越多人开始接触Linux操作系统,从VPS到无线路由的刷机系统(如OpenWRT.Tomato),同时也必不可少地会在各式各样的探针和系统监测界面上看到"系统平均负载"或者&q ...