HTML到PDF转换,11K Star 的pdfmake.js轻松应对

2024-06-07 10:44

本文主要是介绍HTML到PDF转换,11K Star 的pdfmake.js轻松应对,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

在Web开发中,将HTML页面转换为PDF文件是一项常见的需求。无论是生成报告、发票、还是其他任何需要打印或以PDF格式分发的文档,开发者都需要一个既简单又可靠的解决方案。幸运的是,pdfmake.js库以其轻量级、高性能和易用性,成为了许多开发者的首选。本文将介绍如何使用这个拥有11K Star的GitHub项目来实现HTML到PDF的转换。

什么是pdfmake.js

pdfmake.js是一个基于JavaScript的库,用于在客户端和服务器端生成PDF文档。它允许开发者使用HTML和CSS来设计PDF文档的布局和样式,使得创建复杂的PDF文档变得异常简单。

为什么选择pdfmake.js

  • pdfmake.js的文件大小仅为11KB(压缩后),这使得它成为Web应用中一个非常轻量级的解决方案
  • 拥有超过11K Star的GitHub项目,pdfmake.js得到了广泛的社区支持和认可,稳定性和可靠性值得信任
  • 功能丰富,它支持表格、列表、图片、样式、页眉页脚等多种元素,几乎可以满足所有PDF文档的需求。
  • pdfmake.js可以轻松集成到任何现有的Web应用中,无论是使用Node.js、Angular、React还是Vue.js。

快速开始

安装

通过npm安装pdfmake.js非常简单:

npm install pdfmake

或者,如果你使用yarn:

yarn add pdfmake

创建PDF文档

创建一个PDF文档只需要几个简单的步骤:

  1. 引入pdfmake.js
import  pdfMake from 'pdfmake/build/pdfmake';//引入中文字体,避免转换的PDF中文乱码
pdfMake.fonts = {AlibabaPuHuiTi: {normal: 'https://xx/AlibabaPuHuiTi-3-55-Regular.ttf',bold: 'https://xxx/AlibabaPuHuiTi-3-65-Medium.ttf',italics: 'https://xxx/AlibabaPuHuiTi-3-55-Regular.ttf',bolditalics: 'https://xxx/AlibabaPuHuiTi-3-65-Medium.ttf'}
};
  1. 定义文档内容
const dd = {content: ['Hello, 我是程序员凌览',{ text: 'This is a simple PDF document.', fontSize: 12 },{ text: 'It is generated using pdfmake.js.', bold: true }],//设置默认字体defaultStyle: {font: 'AlibabaPuHuiTi'},
};
  1. 创建PDF
const pdf = pdfMake.createPdf(dd);
pdf.getBlob((buffer) => {const file = new File([blob], filename, { type: blob.type })//上传服务器
});//或直接下载
pdf.download('文件名.pdf')

生成的pdf效果:

想动手体验,请访问pdfmake.org/playground.html。

html-to-pdfmake 强强联合

当PDF文档内容非固定,content字段内的结构要随时可变,不能再像下方代码块一样写死,html-to-pdfmake即为解决这类问题而产生的。

const dd = {content: ['Hello, 我是程序员凌览',{ text: 'This is a simple PDF document.', fontSize: 12 },{ text: 'It is generated using pdfmake.js.', bold: true }],//设置默认字体defaultStyle: {font: 'AlibabaPuHuiTi'},
};

安装

通过npm安装:

npm install html-to-pdfmake

或者,如果你使用yarn:

yarn add html-to-pdfmake

HTML字符串转pdfmake格式

  1. 引入html-to-pdfmake
import  pdfMake from 'pdfmake/build/pdfmake';
import  htmlToPdfmake from 'html-to-pdfmake';//引入中文字体,避免转换的PDF中文乱码
pdfMake.fonts = {AlibabaPuHuiTi: {normal: 'https://xx/AlibabaPuHuiTi-3-55-Regular.ttf',bold: 'https://xxx/AlibabaPuHuiTi-3-65-Medium.ttf',italics: 'https://xxx/AlibabaPuHuiTi-3-55-Regular.ttf',bolditalics: 'https://xxx/AlibabaPuHuiTi-3-65-Medium.ttf'}
};//它会返回pdfmake需要的数据结构
const html = htmlToPdfmake(`<div><h1>程序员凌览</h1><p>This is a sentence with a <strong>bold word</strong>, <em>one in italic</em>,and <u>one with underline</u>. And finally <a href="https://www.somewhere.com">a link</a>.</p></div>
`);
  1. 使用html-to-pdfmake转换的数据结构
const dd = {content:html.content, //设置默认字体defaultStyle: {font: 'AlibabaPuHuiTi'},
};
const pdf = pdfMake.createPdf(dd);
pdf.download()

生成的pdf效果:

添加图片要额外设置:

const ret = htmlToPdfmake(`<img src="https://picsum.photos/seed/picsum/200">`, {imagesByReference:true
});
// 'ret' contains:
//  {
//    "content":[
//      [
//        {
//          "nodeName":"IMG",
//          "image":"img_ref_0",
//          "style":["html-img"]
//        }
//      ]
//    ],
//    "images":{
//      "img_ref_0":"https://picsum.photos/seed/picsum/200"
//    }
//  }const dd = {content:ret.content,images:ret.images
}
pdfMake.createPdf(dd).download();

最后

通过上述步骤,我们可以看到pdfmake.js及其配套工具html-to-pdfmake为Web开发者提供了一个强大而灵活的工具,以满足各种PDF文档生成的需求。无论是静态内容还是动态生成的内容,这个组合都能提供简洁而高效的解决方案。

程序员凌览的技术网站https://linglan01.cn/;关注公粽号【程序员凌览】回复"1",获取编程电子书

这篇关于HTML到PDF转换,11K Star 的pdfmake.js轻松应对的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1038958

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

闲置电脑也能活出第二春?鲁大师AiNAS让你动动手指就能轻松部署

对于大多数人而言,在这个“数据爆炸”的时代或多或少都遇到过存储告急的情况,这使得“存储焦虑”不再是个别现象,而将会是随着软件的不断臃肿而越来越普遍的情况。从不少手机厂商都开始将存储上限提升至1TB可以见得,我们似乎正处在互联网信息飞速增长的阶段,对于存储的需求也将会不断扩大。对于苹果用户而言,这一问题愈发严峻,毕竟512GB和1TB版本的iPhone可不是人人都消费得起的,因此成熟的外置存储方案开

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件,方便以后开发的时候查找!!! 函数工具: Lodash 页面固定: stickUp、jQuery.Pin 轮播: unslider、swiper 开关: switch 复选框: icheck 气泡: grumble 隐藏元素: Headroom

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

【数据结构】——原来排序算法搞懂这些就行,轻松拿捏

前言:快速排序的实现最重要的是找基准值,下面让我们来了解如何实现找基准值 基准值的注释:在快排的过程中,每一次我们要取一个元素作为枢纽值,以这个数字来将序列划分为两部分。 在此我们采用三数取中法,也就是取左端、中间、右端三个数,然后进行排序,将中间数作为枢纽值。 快速排序实现主框架: //快速排序 void QuickSort(int* arr, int left, int rig

【专题】2024飞行汽车技术全景报告合集PDF分享(附原数据表)

原文链接: https://tecdat.cn/?p=37628 6月16日,小鹏汇天旅航者X2在北京大兴国际机场临空经济区完成首飞,这也是小鹏汇天的产品在京津冀地区进行的首次飞行。小鹏汇天方面还表示,公司准备量产,并计划今年四季度开启预售小鹏汇天分体式飞行汽车,探索分体式飞行汽车城际通勤。阅读原文,获取专题报告合集全文,解锁文末271份飞行汽车相关行业研究报告。 据悉,业内人士对飞行汽车行业

在JS中的设计模式的单例模式、策略模式、代理模式、原型模式浅讲

1. 单例模式(Singleton Pattern) 确保一个类只有一个实例,并提供一个全局访问点。 示例代码: class Singleton {constructor() {if (Singleton.instance) {return Singleton.instance;}Singleton.instance = this;this.data = [];}addData(value)

pdfmake生成pdf的使用

实际项目中有时会有根据填写的表单数据或者其他格式的数据,将数据自动填充到pdf文件中根据固定模板生成pdf文件的需求 文章目录 利用pdfmake生成pdf文件1.下载安装pdfmake第三方包2.封装生成pdf文件的共用配置3.生成pdf文件的文件模板内容4.调用方法生成pdf 利用pdfmake生成pdf文件 1.下载安装pdfmake第三方包 npm i pdfma