时间戳

首页 > 解决方案 > 从 redux 商店加载 pdf

reactjs - 从 redux 商店加载 pdf

问题描述

我正在尝试在客户端下载服务器端生成的pdf文件，我使用axios获取并将其保存在redux中并使用FileSaver下载它。

const getTicketPdf = ({ userID, ticketID }) =>
    requestApi(`/users/${userID}/tickets/${ticketID}/pdf`, {
        method: 'get',
    });

requestApi 为我获取所有必要的标头，以便我可以下载文件。

然后将数据存储在 redux 中，如下所示：

data: "%PDF-1.4\n3 0 obj\n<</Type /Page\n/Parent 1 0 R\n/MediaBox [0 0 595.00 842.00]\n/Resources 2 0 R\n/Contents 4 0 R>>\nendobj\n4 0 obj\n<</Filter /FlateDecode /Length 64>>\nstream\nx�3R��2�35W(�*T0P�R0T(\u0007�Y@�\u000e��@Q…"

我在渲染中调用它：

  <div>
        <button onClick={ () => this.getPdf(ticket) }>PDF</button>
    </div>

getPdf = ticket => {
    const blob = new Blob([ticket]);
    FileSaver.saveAs(blob, 'Ticket.pdf');
}

我总是收到以下错误：

TypeError：无法读取未定义的属性“saveAs”

我也尝试设置

响应类型：'blob'

但这也无济于事。

接下来我测试的是 react-pdf 库，我设法在 Component 中显示 pdf，但我无法打印它。用户应该只保存它然后在本地打印它（或者至少在单独的选项卡中显示为 PDF，我尝试使用 window.open() 作为 base64 编码字符串）。

否则如何下载服务器端生成的 PDF？有没有更好的方法？

不幸的是，我必须设置 HTTP 标头才能获取该文件。

提前致谢。

标签： reactjspdfreact-redux

解决方案

该错误源于没有FileSaver对象（或者更确切地说，它是非标准的）这一事实。

它似乎被这个第三方库填充：https ://github.com/eligrey/FileSaver.js

推荐阅读