Question

我正在尝试在客户端中下载服务器端生成的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'

我也尝试设置

responseType：“ blob”

但这也无济于事。

我的下一个选择是使用react-pdf库，我设法在Component中显示pdf，但是我无法打印它。用户只应保存并随后在本地打印（或至少在单独的选项卡中将其显示为PDF，我尝试使用window.open（）作为base64编码的字符串）。

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

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

谢谢。

Answer 1

该错误源于没有GET /yourindex/_search { "size": 0 "aggs": { "yourGroup": { "terms": { "field": "Name", "size": 10 }, "aggs": { "theMax": { "max": { "field": "Value" } } } } } }对象（或者说，它是非标准的）的事实。

它似乎由以下第三方库填充：https://github.com/eligrey/FileSaver.js

Answer 2

您看到的错误是由对未定义变量FileSaver的引用引起的-我猜您正在使用FileSaver.js，并且需要修复导入。您还应该记住，不赞成使用FileSaver而是使用download属性。有关如何使用的详细信息，请参见this answer。

无论哪种方式，为了保持商店的美观，您应该在Redux商店中保存对PDF的引用，而不是字符串本身。

从Redux商店加载pdf

2 个答案: