vue 实现 pdf 文件在线预览

最近在项目中要做一个pdf在线预览的功能，发现项目中使用的是 vue-pdf 插件。
这里是 vue-pdf 的官方网站：https://github.com/FranckFreiburger/vue-pdf#readme

首先，安装 vue-pdf：
npm install --save vue-pdf
注： –save会把依赖包名称添加到package.json文件dependencies下
–save-dev则添加到package.json文件devDependencies下

第二步，在项目中引入 vue-pdf：
import pdf from "vue-pdf";

第三步，在 components 中注册 pdf 组件：
components: { pdf },

第四步，以下是官网的使用示例：

点击查看代码

<template>
    <div>
      <pdf
        v-for="i in numPages"
          :key="i"
	  :src="src"
	  :page="i"
	  style="display: inline-block; width: 25%"
	></pdf>
    </div>
  </template>
  <script>
  import pdf from 'vue-pdf'
  var loadingTask = pdf.createLoadingTask('**https://cdn.mozilla.net/pdfjs/tracemonkey.pdf**');
  export default {
    components: {
      pdf
    },
    data() {
      return {
        src: loadingTask,
	numPages: undefined,
      }
    },
    mounted() {
      this.src.promise.then(pdf => {
        this.numPages = pdf.numPages;
      });
    }
 }
</script>

在使用pdf 的时候，刷新页面 ，发现控制台报错：failed to fetch，原因是项目是http://，而 pdf 的 url 是 https://，造下成了跨域，需要后端解决跨域