从 ReactJS 创建 pdf答案

【问题标题】：Create pdf from ReactJS从 ReactJS 创建 pdf
【发布时间】：2017-12-27 19:57:16
【问题描述】：

我正在尝试将 ReactJS 输出（包括可视化报告等）保存为 PDF 文件。

我使用html2canvas 截取屏幕截图，然后使用jspdf 将其转换为PDF。但问题是当屏幕尺寸减小时（或在移动视图中），即使屏幕截图尺寸很小，因为它使用 DOM 样式。所以 PDF 没有正确生成，因为它应该在 Full View 中看到。

【问题讨论】：

标签： reactjs jspdf html2canvas

【解决方案1】：

您可以使用 npm 的 dom-to-png 插件首先创建您的图像，然后将该图像放入您的 PDF 文件中。

喜欢这个

export function printDetails(ref, fileName: string) {
    const pdf = new jsPDF('p', 'mm', 'a4');
    let height = pdf.internal.pageSize.height;
    let pageHeightInPixels = ref.clientHeight;
    let pageHeightInMM = pageHeightInPixels / 3.78;
    let pages = pageHeightInMM / height;
    const roundOff = Number(pages.toString().split('.')[1].substring(0, 1));
    const pageNo = (roundOff > 0 ? pages + 1 : pages);
    let pageCount = pages < 1 ? 1 : Math.trunc(pageNo);
    let imageHeight = height;
    domtoimage.toPng(ref, {
        height: ref.clientHeight,
        width: 665,
        style: {
            transform: 'unset',
            left: '0%',
            margin: 'unset',
            backgroundColor: 'white',
            maxHeight: '100%'
        },
    })
        .then(function (dataURL) {
            hidePrintPreviewModal();
            for (let i = 1; i <= pageCount; i++) {
                let pdfStartingHeight = height * (i - 1);
                pdf.addImage(dataURL, 'JPEG', 30, -pdfStartingHeight, 160, ref.clientHeight);
                if (i < pageCount) {
                    pdf.addPage();
                }
            }
            pdf.save(`${fileName}.pdf`);
        }).catch(function (error) {
            console.error('oops, something went wrong!', error);
        });
}

使用id

<html>
<body>
<div id="print">
{Whatever you want to print}
</div>
</body>
</html>

JS：

const ref = document.getElementById('print');
printDetails(ref, 'test')

使用ref

class Demo extends React.Component {

    refValue;

    printData = () => {
        const node = React.findDOMNode(this.refValue)
        printDetails(node, 'test');
    }

    render() {
        return (
            <div ref={(value) => { this.refValue = value }}>
                {Whatever you want to print}
    <button onClick={this.printData}>PRint</button>
            </div>

        )
    }
}

这个函数是使用dom to png和jspdf来打印文件。它还在计算页数，以免遗漏任何内容。

您需要传递 html 元素的节点，您可以通过 ref 或 document.getElementById 获取该节点，该函数将计算应用了高度和宽度的图像。

参考->

dom-to-image

jspdf

【讨论】：

给出一个错误 => TypeError: node.cloneNode is not a function
还有一件事。我应该为“ref”传递什么？？
ref 你的 DOM 节点的 ID，你必须通过 react 提供 ref 即对 DOM 节点的引用。
dom-to-image 假定 .toPng 的第一个参数是 DOM 节点，并且它递归地克隆它并使用其中应用的所有样式。因此，如果参数不是节点，则无法调用函数 cloneNode，我认为这就是您收到此错误的原因。
我在答案中添加了一些额外的代码，以便您可以轻松了解该功能的工作原理。