如何在 VueJS 中动态提供 API 发送的 pdf 文件？ [复制]

Posted 2023-02-26

【中文标题】如何在 VueJS 中动态提供 API 发送的 pdf 文件？ [复制]

【英文标题】：How to dynamically serve a pdf file sent by API in VueJS? [duplicate]

【发布时间】：2019-03-16 21:33:43

【问题描述】：

我想在我的 VueJS 客户端中提供由我的 API 发送的文件。更具体地说，当浏览给定的 URL 时，如果浏览器支持文件（pdf、文本或图像）应该打开它（例如 Chrome 如何打开 PDF）。我想用 VueJS 或纯 html/CSS/JS 来做。

我有一个快速 API 正在工作，并且在 API 中打开文件的 URL 会打开它。它直接使用 Express 的sendfile 方法。现在，我想在我的客户端中模仿这种行为，而不是将用户重定向到我的 API：我希望他留在同一个域中。

这是我的 API：

const express = require('express')

const router = express.Router()
router.get('/files/*', (req, res) => res.status(200).sendFile('C://mockfile.pdf'));
module.exports = router;

在localhost:3000/files/ 上的任何位置都会在浏览器中打开文件。但现在我希望我的客户有相同的行为，而无需将用户重定向到 localhost:3000（VueJS 应用程序在 localhost:8080 上运行）。

例如，继续localhost:8080/mockfile.pdf 将直接在浏览器中打开文件。如果需要，我可以使用任何库（我已经使用 axios）。

我怎样才能做到这一点？

【问题讨论】：

alexhadik.com/blog/2016/7/7/l8ztp8kr5lbctf5qns4l8t3646npqh

对 *** 问题和博客的回复仅强制下载内容。标题已经正确，因为我的 API URL 打开了文件。我只想将页面“嵌入”到我的客户端中。

这个问题不是vuejs特有的吗？

这个问题是用 vue.js 标记的，所以我假设它与 vuejs 相关。标题也有点暴露了......

我试过下面的包。它确实渲染了 pdf，但它自己渲染它，而不使用内置的 pdf 查看器。

【参考方案1】：

我相信这个包裹就是你要找的 vue-pdf可以用npm下载安装。

然后像这样在你的模板中使用它：

<pdf src="http://localhost:3000/files/mockfile.pdf" @num-pages="pageCount = $event" @page-loaded="currentPage = $event"></pdf>

有关如何处理文档上的事件的详细信息，请参阅链接文档。

【讨论】：

我试过使用这个包。它自己渲染 pdf，但不使用浏览器内置的 pdf 查看器。我的 API 使用 Express 的 sendfile 方法，这会直接在浏览器中呈现 pdf。我只是想要一种在另一个 URL 中使用此响应的方法。