vue移动端实现vue-pdf在线预览与展示，并且解决页面汉字空白的问题

vue移动端实现pdf的页面在线预览展示，CMapReaderFactory可以解决文字不展示、空白问题

//1、安装依赖vue-pdf

npm install --save vue-pdf

//2、使用组件

<pdf v-for="i in numPages" ref="pdfs" :src="pdfUrl" :key="i" :page="i"></pdf>

//3、js文件

<script>
//引入pdf
important pdf from "vue-pdf";
important CMapReaderFactory from "vue-pdf/src/CMapReaderFactory.js"
export default{
  components:{ pdf },
	data(){
	  pdfUrl:"",
	  numPages:[]
	},
	created(){
	  this.getPdf();//调用方法
	},
	//获取pdf
	methods:{
	  //接口获取pdf
	  getPdf(){
	    getPdf({fcn:3 }).then(res=>{
	      if(res.code === '0'){ 
	       //需要转换为base64位
	        this.pdfUrl =  "data:application/pdf;base64," + res.data.pdfUrl;
	        this.pdfUrl = pdf.createLoadingTask(this.pdfUrl ,CMapReaderFactory);
	        this.pdfUrl .promise
	          .then(pdf => {
	            this.$nextTick(() => {
	    	      this.numPages = pdf.numPages
	    	    })
	          .catch((err) => {
                console.error('pdf 加载失败', err)
              })
	        });
	    }
      })
	}
}

</script>