首页 > 解决方案 > 如何在 react-pdf 组件的文件中显示 html?

问题描述

    import sample from './response.pdf'

React-pdf 组件。

<Document
    file={sample}
     onLoadSuccess={this.onDocumentLoad} >
    <Page pageNumber={pageNumber} />
 </Document>

我在文档组件中使用手动 PDF。所以它工作正常有没有办法在文件键中显示 Html 文件。示例:我有一个这样的 html

sample1=Html 代码等...

<Document
    file={sample1}
     onLoadSuccess={this.onDocumentLoad} >
    <Page pageNumber={pageNumber} />
 </Document>

这个我试过了,谁能指导一下如何使用这个。

标签: javascriptreactjspdfpdf-readerreact-pdf

解决方案


这只是一个 PDF 查看器,它将整个文件作为参数并将其显示给您。

要将 HTML 字符串/文件转换为 PDF,您需要另一个使用字符串内容作为流并为您转换的包。

你可以看看这个包可用 html-to-pdf

用法

var htmlToPdf = require('html-to-pdf');
var html = ...; //Some HTML String from code above

htmlToPdf.convertHTMLString(html, 'path/to/destination.pdf',
    function (error, success) {
        if (error) {
            console.log('Oh noes! Errorz!');
            console.log(error);
        } else {
            console.log('Woot! Success!');
            console.log(success);
        }
    }
);

推荐阅读