javascript - 在新选项卡中显示来自 Azure Blob 存储容器的 PDF 文件

标签 javascript reactjs azure-blob-storage

之前肯定有人问过类似的问题,我尝试了那里提供的解决方案,但仍然无法弄清楚。

我正在获取存储在 Azure blob 存储容器中的 PDF 文件。由于 azure 为我提供了访问该文件的直接链接,因此我复制了该链接并将其粘贴到浏览器窗口中,然后下载了该文件。

根据我的要求,我需要在浏览器的新选项卡中显示该文件,因此我尝试在其中一种方法中使用以下代码:

const config = {
 responseType: "blob"
};
try {
  const res = await axios.get(apiUrl, config);

  const file = new Blob([res.data], { type: "application/pdf" });

  const fileURL = URL.createObjectURL(file);

  window.open(fileURL, "_blank");
  } catch (e) {
   console.log(e);
  }

通过在调用此方法时执行此操作,新选项卡会立即打开和关闭。在用户自行关闭之前,如何让新标签保持打开状态?

Issue can be seen in attached GIF here

最佳答案

正如上面@GeorgeChen 所指出的,我将 CONTENT-TYPE 更改为 application/pdf,然后我清除了浏览器的缓存并重新启动了我的应用程序,我的问题得到了解决。 😎

关于javascript - 在新选项卡中显示来自 Azure Blob 存储容器的 PDF 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61135269/

相关文章:

javascript - 根据选择的值绘制 'N' 输入

javascript - 在 Javascript/ajax 或 jquery 中提交多个表单

javascript - 防止其他元素发生事件

javascript - 将所有 className 类作为 Prop 放在 react 中是个好主意吗?

reactjs - : react-scripts: command not found after running npm start

javascript - 将 geojson 层添加到 openlayers 3

css - React App On Heroku - CSS 样式在移动设备上不生效

python - 如何将 "Microsoft.Azure.WebJobs.Extensions.Storage"降级到版本 5.0.1(Python Azure Blob 触发器)

Azure Blob 存储作为源,FTP 作为目标

Azure Blob 存储 - 将存档的 blob 复制到在线层