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

前往低代码交流专区

更多推荐