从服务器加载 pdf 并嵌入到 Vue 应用程序中

Question

我有一个返回 pdf 文件的 api。我试图在 vue.js 中显示它，并发现 vue-pdf 组件看起来应该可以完成这项工作。 这是github上的项目

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

:src 属性的文档在这里

我的 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() 'ing 它对我不起作用。

Answer 1

首先将您的预期更改responseType为“blob”：return axios.get(`${process.env.VUE_APP_API_INTRANET}/pdf`, {   responseType: "blob"   })还将二进制响应转换为 a Blob，然后生成对象 url：.then(response => {   console.log("Success", response);     const blob = new Blob([response.data]);     const objectUrl = URL.createObjectURL(blob);     this.pdfsrc = objectUrl; })revokeObjectURL用完后不要忘记使用，以免内存泄漏。