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

Vue2 vue-pdf插件

安装 vue-pdf 插件，

npm install --save vue-pdf

<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>

当使用 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>