一键完成HTML页面PDF(Word)转换

tech2026-09-24  0

html2pdf_word

  在实习期间,由于公司业务需要,需配合后端一起实现报表页面导出为PDF和Word文件的需求。但是了解到后端实现较为复杂,同时负责后端的师兄,需求较多业务繁忙。恰巧我手头没有其他的需求,就自己研究起了如果只通过前端去实现这一导出页面为PDF和Word的功能。

  参照了网上的一些方案,我结合一些已有的jsPDF和html_docx这个两个库,封装了一个自己的库,解决了jsPDF中文乱码和设置中文字体的问题以及html_docx库导出页面配置复杂等问题,用户只需安装html2pdf_word这个库,引入相应的函数并传入对应的参数,即可一行代码完成前端导出PDF和Word文件的操作。

  具体使用方法请见下文和我的GitHub仓库,欢迎大家在GitHub给提issue一起讨论,一起改进这个仓库。(PS:我是个刚入门的前端菜鸟,请大佬们鞭挞我把orz)

Uasge✨

  Covert Html to PDF or Word File

Install 📦

npm install html2pdf_word -s

Arguments🔨

参数名(按顺序排列)说明类型是否必填默认值domId需转换的DOM的Id或className(开头带有’#‘或’.’)string是无fileName转换后的文件名string是无fileType转换后文件类型(‘PDF’|‘Word’)string否‘PDF’title转换后的文件中的标题string否无subTitle转换后的文件中的副标题string否无font转换后的文件的标题字体(目前‘黑体’|‘楷体’)string否‘黑体’

Examples📐

 1.Import function from package

import htmlToPDForWord from 'html2pdf_word'

 2.Use it

htmlToPDForWord('.chart-boxs','文件名','PDF','标题','副标题','楷体');

Future work🌈

1、添加更多的可选字体 2、可自由调整标题和副标题大小 3、可自由调整文字居中位置 4、优化项目结构和体积
最新回复(0)