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

相关文章

Python实现PDF按页分割的技术指南

《Python实现PDF按页分割的技术指南》PDF文件处理是日常工作中的常见需求,特别是当我们需要将大型PDF文档拆分为多个部分时,下面我们就来看看如何使用Python创建一个灵活的PDF分割工具吧... 目录需求分析技术方案工具选择安装依赖完整代码实现使用说明基本用法示例命令输出示例技术亮点实际应用场景扩

小白也能轻松上手! 路由器设置优化指南

《小白也能轻松上手!路由器设置优化指南》在日常生活中,我们常常会遇到WiFi网速慢的问题,这主要受到三个方面的影响,首要原因是WiFi产品的配置优化不合理,其次是硬件性能的不足,以及宽带线路本身的质... 在数字化时代,网络已成为生活必需品,追剧、游戏、办公、学习都离不开稳定高速的网络。但很多人面对新路由器

从入门到精通详解LangChain加载HTML内容的全攻略

《从入门到精通详解LangChain加载HTML内容的全攻略》这篇文章主要为大家详细介绍了如何用LangChain优雅地处理HTML内容,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录引言:当大语言模型遇见html一、HTML加载器为什么需要专门的HTML加载器核心加载器对比表二

SpringBoot集成EasyPoi实现Excel模板导出成PDF文件

《SpringBoot集成EasyPoi实现Excel模板导出成PDF文件》在日常工作中,我们经常需要将数据导出成Excel表格或PDF文件,本文将介绍如何在SpringBoot项目中集成EasyPo... 目录前言摘要简介源代码解析应用场景案例优缺点分析类代码方法介绍测试用例小结前言在日常工作中,我们经

SpringBoot+EasyPOI轻松实现Excel和Word导出PDF

《SpringBoot+EasyPOI轻松实现Excel和Word导出PDF》在企业级开发中,将Excel和Word文档导出为PDF是常见需求,本文将结合​​EasyPOI和​​Aspose系列工具实... 目录一、环境准备与依赖配置1.1 方案选型1.2 依赖配置(商业库方案)二、Excel 导出 PDF

Kotlin Map映射转换问题小结

《KotlinMap映射转换问题小结》文章介绍了Kotlin集合转换的多种方法,包括map(一对一转换)、mapIndexed(带索引)、mapNotNull(过滤null)、mapKeys/map... 目录Kotlin 集合转换:map、mapIndexed、mapNotNull、mapKeys、map

一文详解如何使用Java获取PDF页面信息

《一文详解如何使用Java获取PDF页面信息》了解PDF页面属性是我们在处理文档、内容提取、打印设置或页面重组等任务时不可或缺的一环,下面我们就来看看如何使用Java语言获取这些信息吧... 目录引言一、安装和引入PDF处理库引入依赖二、获取 PDF 页数三、获取页面尺寸(宽高)四、获取页面旋转角度五、判断

关于集合与数组转换实现方法

《关于集合与数组转换实现方法》:本文主要介绍关于集合与数组转换实现方法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1、Arrays.asList()1.1、方法作用1.2、内部实现1.3、修改元素的影响1.4、注意事项2、list.toArray()2.1、方

利用Python脚本实现批量将图片转换为WebP格式

《利用Python脚本实现批量将图片转换为WebP格式》Python语言的简洁语法和库支持使其成为图像处理的理想选择,本文将介绍如何利用Python实现批量将图片转换为WebP格式的脚本,WebP作为... 目录简介1. python在图像处理中的应用2. WebP格式的原理和优势2.1 WebP格式与传统

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》:本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载(1)下载地址(2)系统选择(3)版本选择2、安装部署(1)解压(2)配置文件修改(3)启动(4)