从服务器加载 pdf 并嵌入 Vue 应用程序答案

【问题标题】：Load pdf from server and embed in Vue app从服务器加载 pdf 并嵌入 Vue 应用程序
【发布时间】：2021-03-23 02:56:58
【问题描述】：

我有一个返回 pdf 文件的 api。我试图在 vue.js 中显示它，并找到了看起来应该可以完成工作的 vue-pdf 组件。 Here's the project on github

我能够调用 API 并获得二进制响应，但我无法将二进制数据转换为 vue-pdf 库可以显示的内容。

The documentation for the :src prop is here

下面是我的 vue 代码，其中一些失败的尝试被注释掉了。

<template>
  <pdf :src="pdfsrc"></pdf>
</template>

<script>
import pdf from "vue-pdf";
import axios from "axios";

export default {
  components: {
    pdf
  },
  data() {
    return {
      pdfsrc: null
    };
  },
  created() {
    return axios
      .get(`${process.env.VUE_APP_API_INTRANET}/pdf`, {
        responseType: "application/pdf"
      })
      .then(response => {
        console.log("Success", response);
       
       // 1
       // this.pdfsrc = new Blob([response.data]);
       
       // 2
       //this.pdfsrc = response.data;
       
       //3
       //   for (var i = 0; i < response.data.length; ++i) {
        //   this.pdfsrc.push(response.data.charCodeAt(i) & 0xff);
        //   }

        //4
        this.pdfsrc = new Uint8Array(response.data);
      })
      .catch(console.error); //
  }
};
</script>

我意识到，对于我的示例，我可以将 src 设置为 api 的 URL，但最终它需要添加授权标头并与 OAuth 调用链接，因此它需要是一个 api 调用。

我还想将 pdf 与来自另一个 api 调用的一些数据并排显示，因此使用动态创建加载数据和 .click() 的锚标记的技巧对我不起作用。

【问题讨论】：

标签： javascript vue.js pdf pdfjs vue-pdf

【解决方案1】：

首先将您预期的responseType 更改为“blob”：

return axios.get(`${process.env.VUE_APP_API_INTRANET}/pdf`, {
  responseType: "blob"
})

还将二进制响应转换为Blob，然后生成object url：

.then(response => {
  console.log("Success", response);
  const blob = new Blob([response.data]);
  const objectUrl = URL.createObjectURL(blob);
  this.pdfsrc = objectUrl;
})

完成后不要忘记使用revokeObjectURL 以避免内存泄漏。

【讨论】：