Vue2系列教程——vue-pdf插件_vue2 vue-pdf

Vue2 vue-pdf插件

安装 vue-pdf 插件，

npm install --save vue-pdf
1

<template>
<div class="pdf">
    <pdf ref="pdf" :src="pdfUrl"> </pdf>
</div>
</template>
<script>
import pdf from "vue-pdf"
export default {
  components: { pdf },
  data() {
    return {
      pdfUrl: '',
    };
  },
  mounted() {
    this.getPdf()
  },
  methods: {
    getPdf() {
      this.$axios
        .get("http://file.dakawengu.com/file/2018-05-29/20180527-tianfeng.pdf")
        .then((res) => {
          console.log(res.request.responseURL);
          this.pdfUrl = res.request.responseURL
        });
    },
  },
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

当使用 vue-pdf 插件出现跨域问题时，可以如下方式解决，

<script>
import pdf from 'vue-pdf'
  export default {
    components: {pdf},
    data () {
      return {
　　　　　src: 'https://cdn.mozilla.net/pdfjs/tracemonkey.pdf', // pdf文件地址
      }
    },
　　created（） {
　　　　this.src = pdf.createLoadingTask(this.src)  // 处理跨域问题
　　}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13