vue 根据接口返回的url预览pdf和下载pdf文件

一、预览PDF

        预览PDF需要借助 vue-pdf 这个组件

        安装

npm install vue-pdf

         在组件中使用

<template>
  <pdf :src=pdfUrl ></pdf>
</template>
<script>
  import pdf from 'vue-pdf'
  exprot default {
    components: {
      pdf
    },
    data() {
        pdfUrl: ''
    },
    methods: {
        //写方法，调取后台接口，得到返回的url给pdfURL赋值即可
    }
  }
</script>

        这样就能满足pdf的预览了，但是只能展示第一页pdf，如果pdf是多页，可以使用for循环加载所有页面

 

<template>
 <pdf
    v-for="i in numPages"
    :key="i"
    :src="src"
    :page="i"
 ></pdf>
</template>
<script>
  import pdf from 'vue-pdf'
  exprot default {
    components: {
      pdf
    },
    data() {
        numPages: undefined,
        src: ''
    },
    methods: {
        getUrlFuc(){
            axios接口.then( res => {
                //res.data.url 就是接口返回的pdf在线地址
                this.src = pdf.createLoadingTask(res.data.url)
                this.src.promise.then(pdf => {
                    this.numPages = pdf.numPages
                })
            })
        }
    }
  }
</script>

二、下载pdf

        pdf的URL直接打开的话是网页预览界面，而不是文件下载，文件下载需要的是二进制数据，但是如果接口返回的是在线链接，那么可以通过以下操作进行格式转化再去下载

        创建一个方法downloadPDF()，接收一个在线URL地址，然后使用axios发送GET请求获取PDF文件的二进制数据。

import axios from 'axios';

methods: {
  async downloadPDF(pdfUrl) {
    const response = await axios({
      url: pdfUrl,
      method: 'GET',
      responseType: 'blob', // 必须指定为blob类型才能下载
    });
    const url = window.URL.createObjectURL(new Blob([response.data]));
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', 'file.pdf');
    document.body.appendChild(link);
    link.click();
  },
}

        在这个方法中，我们先使用axios发送GET请求，然后设置响应类型为blob，这样响应内容将会是一个二进制数据。接下来我们创建一个URL对象，以便在浏览器中访问该PDF文件，然后创建一个a标签并设置其href属性为该URL对象的值。为了将其下载到本地，我们还需要设置download属性为file.pdf。之后将该a标签附加到文档中并调用其click()方法即可下载该PDF文件。

        在Vue模板中使用该方法
        在Vue模板中，你只需要调用downloadPDF()方法并传入PDF文件的URL地址即可：

<button @click="downloadPDF('https://example.com/file.pdf')">下载PDF文件</button>

        这将会在点击该按钮时调用downloadPDF()方法并下载名为file.pdf的PDF文件。

        注意：如果你的PDF文件需要授权才能访问，则需要在请求头中包含相应的授权信息。具体内容可以参考axios官方文档。

        vue-pdf打包发生产环境上 ***worker.js 出现跨域问题报错，我参考了以下文章得到解决，记录一下。

使用vue-pdf打包生成***.worker.js，在使用cdn后跨域问题