html2pdf.js 怎么将 html 转为 PDF

前言：

html2pdf.js 可以直接将页面 转为canvas 图像，然后生成pdf。所以 没有中文乱码的问题。但是 由于是canvas ，所以肯定会 出现分辨率的问题。不考虑 文件大小的话，可以把分辨率调高。

代码实现：

引入 html2pdf 库

yarn add html2pdf.js

js 代码实现

import React, { useState } from 'react';
import {
    Row,
    Button
} from 'antd';
import html2pdf from 'html2pdf.js';

const generatePDF = (setPdf) => {
    const domStr="<div>hello world!</div>"
    const element = document.createElement('div');
    element.innerHTML = domStr;
   const opt = {
        margin: 1,
        filename: 'example.pdf',
        image: { type: 'jpeg', quality: 2 },
        html2canvas: { scale: 2 },
        jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
    };
    // html2pdf().set(opt).from(element).save();
    const worker = html2pdf().set(opt).from(element);
    worker.save(); //保存到本地
    // 生成 文件流 在页面展示预览
    worker.toPdf().outputPdf('datauristring').then((res) => {
        setPdf(res)
    });
}

function App() {
    const [pdf, setPdf] = useState(null);
    const getPdf = () => {
        generatePDF(setPdf);
    }

    return (
        <Row style={ { flexDirection: 'column' } }>
            <div style={ { width: '100%' } }> <Button onClick={ getPdf } >生成pdf</Button></div>
            <div>

                {
                    pdf ? <iframe title="PDF预览器" src={ pdf } width="1200px" height="1000px" /> : null
                }
            </div >
        </Row>
    );
}

export default App;

相关介绍：

html2pdf.js任务（由prereq系统强制执行）的基本工作流是：

.from() -> .toContainer() -> .toCanvas() -> .toImg() -> .toPdf() -> .save()

html2pdf.js 相关的Worker API

method	Arguments	Description
from	src, type	设置PDF的源（HTML字符串或元素）。可选的type指定其他源：'string'、'element'、'canvas'或'img'。
to	target	将源转换为指定的目标（'container'、'canvas'、'img'或'pdf'）。每个目标也有自己的toX方法，可以直接调用：toContainer()，toCanvas()，toImg()，和toPdf()。
output	类型，选项，src	根据指定的src（'pdf'（默认）或'img'）路由到相应的outputPdf或outputImg方法。
outputPdf	type, options	将type和options发送到jsPDF对象的output方法，并将结果作为承诺返回（使用.then进行访问）。更多信息请参见jsPDF源代码。
outputImg	type, options	返回图像的指定数据类型作为承诺（使用.then进行访问）。支持的类型：'img'、'datauristring'/'dataurlstring'和'datauri'/'dataurl'。
save	filename	使用可选文件名保存PDF对象（创建用户下载提示）。
set	opt	设置指定的属性。有关详细信息，请参阅下面的选项。
get	key, cbk	返回在key中指定的属性，可以作为承诺（使用.then访问），也可以通过调用cbk（如果提供的话）。
then	onFulfilled, onRejected	标准Promise方法，对Worker使用thisre-bound，并添加progress-tracking（请参阅下面的进度）。注意，.then返回Worker，这是Promise的一个子类。
thenCore	onFulFilled, onRejected	标准Promise方法，使用thisre-bound向工作线程（noprogress-tracking)）。注意，.thenCore返回Worker，这是Promise的一个子类。
thenExternal	onFulfilled, onRejected	真实承诺法。使用此“退出”辅助程序链-您将无法在.thenExternal之后继续链接工作程序方法。
catch, catchExternal	onRejected	标准承诺方法。catchExternal退出工作程序链-您将无法在.catchExternal之后继续链接工作程序方法。
error	msg	在员工的承诺链中引发错误。