注： 在使用vue-pdf遇到很多问题，因个人能力有限弃坑，最后使用了pdfjs，可参考如下链接：

https://www.cnblogs.com/linjiangxian/p/13730954.html

https://blog.csdn.net/shentibeitaokong/article/details/80011900

在vue中实现pdf在线预览

1.安装vue-pdf

npm install --save vue-pdf

<template>
  <div class="pdf" v-show="fileType === 'pdf'">
    <p class="arrow">
    <!--上一页 -->
    <span @click="changePdfPage(0)" class="turn" :class="{grey: currentPage==1}">Preview</span>
    {{currentPage}} / {{pageCount}}
    <!--下一页 -->
    <span @click="changePdfPage(1)" class="turn" :class="{grey: currentPage==pageCount}">Next</span>
    </p>
    <!-- 自己引入就可以使用,这里我的需求是做了分页功能,如果不需要分页功能,只要src就可以了 -->
    <!-- src需要展示的PDF地址 -->
    <!-- page当前展示的PDF页码 -->
    <!-- num-pages文件总页码 -->
    <!-- @page-loaded一开始加载的页面 -->
    <!-- @loaded加载事件 -->
    <pdf
      :src="src"
      :page="currentPage"
      @num-pages="pageCount=$event"
      @page-loaded="currentPage=$event"
      @loaded="loadPdfHandler"> // 
    </pdf>
  </div>
</template>
import pdf from 'vue-pdf/src/vuePdfNoSss.vue'
export default {
  name: "login",
  data() {
    return {
      currentPage: 0, // pdf文件页码
      pageCount: 0, // pdf文件总页数
      fileType: "pdf", // 文件类型
      src: "/static/img/深入浅出Node.js.pdf", // pdf文件地址
    };
  },
  components: {
    pdf
  },
  created() {
    // 有时PDF文件地址会出现跨域的情况,这里最好处理一下
    this.src = pdf.createLoadingTask(this.src)
  },
  methods: {
    loadPdfHandler(e) {
      this.currentPage = 1; // 加载的时候先加载第一页
    },
    // 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页
     changePdfPage (val) {
        // console.log(val)
        if (val === 0 && this.currentPage > 1) {
          this.currentPage--
          // console.log(this.currentPage)
        }
        if (val === 1 && this.currentPage < this.pageCount) {
          this.currentPage++
          // console.log(this.currentPage)
        }
     },
  }
};

这时运行本地pdf可以正常显示，打包之后生产环境pdf显示空白，提示hash+woker.js 404

2、修改node-modules >> vue-pdf >> vuePdfNosss.vue

<style src="./annotationLayer.css"></style>
<script>

	import componentFactory from './componentFactory.js'
    // 修改部分：引入pdfjsworker
	import PdfjsWorker from 'pdfjs-dist/build/pdf.worker.js'

	if ( process.env.VUE_ENV !== 'server' ) {

		var pdfjsWrapper = require('./pdfjsWrapper.js').default;
		var PDFJS = require('pdfjs-dist/es5/build/pdf.js');

		if ( typeof window !== 'undefined' && 'Worker' in window && navigator.appVersion.indexOf('MSIE 10') === -1 ) {
            // 修改部分：注释原本的引入方法
			// var PdfjsWorker = require('worker-loader!pdfjs-dist/es5/build/pdf.worker.js');
			PDFJS.GlobalWorkerOptions.workerPort = new PdfjsWorker();
		}

		var component = componentFactory(pdfjsWrapper(PDFJS));
	} else {

		var component = componentFactory({});
	}

	export default component;
</script>

3.修改vue.config.js中的配置文件

chainWebpack: (config) => {
    config.module
      .rule('worker')
      .test(/\.worker\.js$/)
      .use('worker-loader').loader('worker-loader')
      .options({
        inline: true,
        fallback: false
      }).end();
  }