vue2项目中嵌入pdf插件所遇到的坑

1、引入vue-pdf

cnpm install  vue-pdf --save 

2、在vue2项目中引用vue-pdf

import pdf from 'vue-pdf'
export default {
    components:{
        pdf
    },
    },

}

3、单个页面的pdf文件展示

 <pdf 
          src='pdf存放的位置'
        ></pdf>

4、多页PDF文件展示

<template>
    <div style="margin-top: 10px;" >
         <pdf 
           v-for="i in numPages"
            :key="i"
            :src="src"
            :page="i"
            style="display: inline-block; width: 100%"
        ></pdf>
        
    </div>
       
  
</template>

<script>
import pdf from 'vue-pdf'
  let loadingTask = pdf.createLoadingTask('/static/pdf/正文-建立健全分层分级精准防控末端发力终端见效工作机制实施细则');//这样能更快的加载
export default {
    components:{
        pdf
    },
    data() {
        return {
            src: '/static/pdf/正文-建立健全分层分级精准防控末端发力终端见效工作机制实施细则.pdf',
            numPages: undefined,
        }
    },
    mounted() {
     
        loadingTask.promise.then(pdf => {
        this.numPages = pdf.numPages;
        console.log(this.numPages)
        });
    },

}
</script>

<style>

</style>

重点注意

（1）在vue项目中，读取本地的pdf文件需要放到public下static文件夹中，不能放在别的地方；
（2）引用时，不能使用相对路径，因为使用public文件下面的资源，是不会被webpack处理的，它们会被直接复制到最终的打包目录下面，且必须使用绝对路径来引用这些文件。写法：“/static/pdf/show.pdf"，/即表示public文件夹(需略去public)；