显示 pdf 文件并从 arraybuffer blob 下载 onclick

Question

我在 nodejs 后端创建 pdf 并将它们作为 blob 存储在我的数据库中。

在我的前端（React）中，我正在调用 api 并接收整个 blob 数据列表并将其转换为如下文件。然后从它们创建 URL 并将 URL 存储为数组和状态。

componentDidMount() {
    const fileURLs = [];
    fetch(`/api/invoices`)
      .then((res) => res.json())
      .then((invoices) => {
        this.setState({ invoices });
        invoices.map((inv) => {
          const file = new Blob([inv.file_content], {
            type: "application/pdf",
          });
          const fileURL = URL.createObjectURL(file);
          fileURLs.push(fileURL);
        });
        this.setState({ fileURLs });
      })
  }

我收到的 blob 数据也如下所示： blob data

在我的 render() 中，我将 url 链接到锚标记以在新选项卡中打开它。网址看起来像这样：blob:http://localhost:3000/1b5c4fe3-bb7c-4850-8804-d850f824b07f

this.state.invoices.map((p, i) => (
...
  <a
    href={this.state.fileURLs[i]}
    target="_blank"
    rel="noopener noreferrer"
  >
    {p.file_name}
  </a>
...
)

如果我访问该网址，它只会显示 无法加载 PDF 文档。

在我的后端，我将 response.arrayBuffer() 存储为我的 blob 数据。 我还将 pdf 保存在本地文件系统中只是为了测试，它可以毫无问题地创建 pdf 文件。

编辑：我也附上了我的一些后端代码。

.then(async data => {
  const response = await fetch(api, {
      method: "GET",
      headers: {
          "Accept": "application/octet-stream",
          "Authorization": "Bearer " + token
      },
      encoding: null
 });
const filename = response.headers.get('Content-Disposition')
    .split(';')
    .find(n => n.includes('filename='))
    .replace('filename=', '')
    .trim();
const invoice = await response.arrayBuffer();
return [filename, invoice];
})
.then(data => {
    const created = moment().format('YYYY-MM-DD HH:mm:ss');
    //save pdf file in local directory
    var base64Str = Buffer.from(data[1]).toString('base64');
    base64.base64Decode(base64Str, './frontend/src/invoices/' + data[0]);
    
// save pdf in database table
    const query = `call create_invoice_procedure('${data[0]}','${data[1]}','${created}')`;
    connection.query(query, (err, rows) => {
        if (err) {
            throw err;
        }
     });
  })

获取所有发票的发票路径：

router.get('/', (req, res) => {
    var query = `SELECT * from table`;
    connection.query(query, (error, results) => {
        if (error) {
            return error;
        }
        else {
            res.json(results);
        }
    })
});

所以我的问题是我无法在前端查看或下载 pdf。

Answer 1

如果您确定您的 blob 是正确的，请尝试在任何元素上添加点击事件以打开 url，而不是在锚标记上使用 href。 这对我有用：

const blob = new Blob([fileData], {
        type: 'application/pdf'
      });
      const fileURL = URL.createObjectURL(blob);
      window.open(fileURL, '_blank', 'location=yes,height=650,width=1000,scrollbars=yes,status=yes');