html-to-pdf 使用说明

本库致力于 html 在线导出为 pdf，实现智能分页效果，不会切断文本图片表格等内容，可兼容手机端。本库依赖 html2canvas 和 jspdf，使用 canvas 绘图，请保证使用浏览器对以上库是支持的。

html-to-pdf 示例

html-to-pdf 示例源码地址

安装

# 使用npm
npm i -S @wk-tools/html-to-pdf
# 使用yarn
yarn add @wk-tools/html-to-pdf

用法

// ...
import HtmlToPdf from '@wk-tools/html-to-pdf'

function exportPDF() {
  Loading.show()
  const element = document.getElementById('pdf-container')
  const htmlToPdf = new HtmlToPdf(element, {
    name: '葵花宝典',
  })
  htmlToPdf
    .save()
    .catch(() => {
      Message.error('下载失败')
    })
    .finally(() => {
      Loading.hide()
    })
}

类/属性/方法/参数等说明

HtmlToPdfClass

属性	类型	说明
$el	HTMLElement	PDF DOM 元素
jsPdf	JsPdf	JsPdf 实例
pdfWidth	number	PDF 单页宽度
pdfHeight	number	PDF 单页高度
options	PdfOptions	PDF 配置
plugins	PluginWrap	插件列表
createVirtualWrap	(element: Node | Element, width: number) => HTMLDivElement	创建虚拟 DOM，并设定宽度
createCanvas	(width: number, height: number) => HTMLCanvasElement	创建 虚拟 canvas 元素
loadImage	(url: string) => Promise	加载图片，并返回 image 元素
waitForImagesLoaded	(element: Element) => Promise	等待图片加载完成，并针对图片设置通用样式
resetBaseStyle	(element: Element) => void	重置元素样式，默认针对 h1-h6 的 margin 样式设置
getPageImages	Promise	获取生成 PDF 的页面图片
addPageImage	(image: string) => void	将图片加入 PDF 页面管理中，将会作为 PDF 页面导出
preview	() => void	预览生成的 PDF 内容
save	() => Promise	生成 PDF
use	user(plugin: PdfPlugin, pluginOptions?: T) => void	注册插件

注意：resetBaseStyle 与 waitForImagesLoaded 包含的重制样式，是因为 html2canvas 在导出图片时，某些样式会与 DOM 元素不一致，故要增加特定样式以达到所见即所得。若是遇到页面所见与导出不一致，请着重思考样式问题。

PdfOptions

参数	类型	必填项	默认	说明
name	string	否	--	导出文件名称
monoblockClassName	string | string[]	否	'html-pdf-monoblock'	分页处理时，将元素内容当作一个整体
backgroundColor	string	否	#fff	PDF 背景颜色
scale	number	否	2	导出内容放大倍数，增加内容清晰度，必须大于 0
margin	number | number[]	否	10	PDF 内容边距
ignoreElement	(element: Element) => Element[]	否	--	分页计算忽略的元素
resetStyleTags	string[]	否	--	需要重置样式的标签，目前只发现 h1-h6 标签在 html2canvas 中默认增加了 margin 值
header	HeaderOrFooterOptions	否	--	页眉参数
footer	HeaderOrFooterOptions	否	--	页脚参数
adaptive	boolean	否	true	是否开启自适应，开启自适应会根据设置宽度导出 PDF
adaptiveOptions	AdaptiveOptions	否	--	自适应导出 PDF 配置
jsPDFOptions	jsPDFOptions	否	{ unit: "px", format: "a4" }	jsPDF 插件配置，单位仅支持 px
html2CanvasOptions	html2CanvasOptions	否	{ scale: PdfOptions.scale ,logging: false,useCORS: true,width: element.width}	html2canvas 插件配置

HeaderOrFooterOptions

参数	类型	必填项	默认	说明
image	string	否	--	页眉页脚图片地址
imageWidth	number	否	--	页眉页脚图片绘制宽度
imageHeight	number	否	--	页眉页脚图片绘制高度
text	string	否	--	页眉页脚文案内容
fontSize	number	否	--	页眉页脚文案字体大小
fontFamily	string	否	--	页眉页脚文案字体
align	"left" | "center" | "right"	否	--	页眉页脚文案对齐方式
color	string	否	--	页眉页脚文案颜色

AdaptiveOptions

参数	类型	必填项	默认	说明
pdfWidth	number	否	800	按此宽度绘制导出 PDF 内容
parentElement	HTMLElement	否	document.body	自适应创建元素挂载节点，必要时可以规避一些样式问题
resetView	(element: Element) => void	否	--	自适应模式下，是克隆的元素，导致 canvas 无法展示，对内容重新绘制
resetViewDelay	number	否	1000	图表重绘后，延迟处理导出，给图表绘制预留充足的时间

PdfPlugin

为了方便扩展基础功能，PDF 生成增加了插件机制。插件有 beforeDraw、draw、afterDraw 三个钩子，通过钩子可以增加 PDF 页面，或者在 PDF 页面中增加自定义内容（页眉页脚）。本工具内置了页眉页脚插件，并开放了封面、封底插件，用于用户参考使用。若是有目录或水印需求，可通过插件实现。

方法	类型	说明
beforeDraw	Function	PDF 绘制前的钩子，可用于封面的绘制
draw	Function	PDF 单页面绘制的钩子，可用于绘制水印等自定义内容
afterDraw	Function	PDF 绘制后的钩子，可用于绘制封底

SinglePageOptions

参数	类型	必填项	默认	说明
pageMargin	PageMargin	是	--	PDF 绘制的边距(上下左右)
widthRatio	number	是	--	绘制的 canvas 与 pdf 尺寸 - 转化宽度比
y	number	是	--	绘制 canvase 的 y 轴坐标
canvasWidth	number	是	--	单页 canvas 的宽度
canvasHeight	number	是	--	单页 canvas 的高度
contentWidth	number	是	--	单页内容的宽度，去除左右边距
contentHeight	number	是	--	单页内容的高度，去除上下边距
page	number	是	--	当前页码
totalPage	number	是	--	总页码

封面/底插件

CoverPluginOptions

参数	类型	必填项	默认	说明
cover	CoverOptions	否	--	封面参数
backcover	CoverOptions	否	--	封底参数

CoverOptions

参数	类型	必填项	默认	说明
backgroundColor	string	否	#fff	背景颜色
image	string	否	--	背景图片
fit	"fill" | "contain" | "cover" | "none"	否	--	图片填充方式
text	string	否	--	封面/底 文案内容
fontSize	number	否	32	文案字体大小
fontWeight	string | number	否	'bold'	文案字体粗细
fontFamily	string	否	"微软雅黑"	文案字体
color	string	否	--	文案颜色
element	HTMLElement	否	--	封面/底 DOM 元素，将转化成图片
elementFit	"fill" | "contain" | "cover" | "none"	否	--	封面/底 DOM 元素填充方式

License

MIT