如何在浏览器中打开pdf文件而不是下载它？答案

【问题标题】：How to open a pdf file in browser instead of downloading it?如何在浏览器中打开pdf文件而不是下载它？
【发布时间】：2020-11-03 17:01:30
【问题描述】：

我有一个 api，它提供了一个带有 pdf 链接的 json 对象

{ pdf_link: 'http://localhost:3000/logs.pdf' }

当用户单击文件名时，我想在单独的浏览器选项卡中打开此 pdf。

我尝试在 a 标记中将 URL 作为 href 提供

<a href={response.pdf_link} target='_blank'>{FileName}</a>

但是当我点击链接时，pdf 正在下载，而不是在浏览器选项卡中打开。

我找到了this的博文并尝试了以下方法。

import axios from 'axios';
import React from 'react';

export const PdfLink = ({ apiResponse }: any) => {

  const showFile = (blob: Blob, fileName: string) => {
    const newBlob = new Blob([blob], {type: 'application/pdf'});

    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
      window.navigator.msSaveOrOpenBlob(newBlob);
      return;
    }

    const data = window.URL.createObjectURL(newBlob);
    const link = document.createElement('a');
    link.href = data;
    link.download = fileName;
    link.click();

    setTimeout(() => {
      window.URL.revokeObjectURL(data);
    }, 100);
  };

  const onClickLink = () => {
    axios({
      method: 'GET',
      responseType: 'blob',
      url: apiResponse.pdf_link,
    })
    .then(r => showFile(r.data, apiResponse.fileName));
  };

  return (
    <span className='link' onClick={onClickLink}>
      file.pdf
    </span>
  );
};

但这在获取文件 blob 的 api 调用中失败。

axios({
      method: 'GET',
      responseType: 'blob',
      url: apiResponse.pdf_link,
    })

错误：Access to XMLHttpRequest at 'http://localhost:3005/file.pdf' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

下图显示了 api 调用的请求和响应标头

我知道上述错误是由 cors 引起的，但在服务器中，我也允许来自其他来源的请求

app.use(KoaCors({ origin: '*', credentials: true }));

我做错了什么？

【问题讨论】：

这能回答你的问题吗？ View pdf file in browser instead of downloading
您正在尝试从您的站点访问不同的端口，因此浏览器将自动触发 cors 错误。出于安全原因，浏览器会阻止跨源请求
@aravind_reddy 我们允许来自服务器中其他来源的 api 请求。我更新了问题以表明这一点。
@ArjunTRAj 我在这里看到了类似的答案 - stackoverflow.com/questions/6293893/…。我应该在哪里设置这些？在服务器中？
你允许它在你的服务器中，但是被浏览器阻止了

标签： javascript reactjs pdf download blob

【解决方案1】：

你可以使用object标签来显示pdf：-

<object
        data={/* url of your pdf file*/}
        type="application/pdf"
        width="100%"
        height="100%"
></object>

更多信息，看这里 https://www.w3schools.com/tags/tag_object.asp

【讨论】：