vue项目中使用pdf.js，通过解析后台base64格式文件解决跨域问题

vue项目中使用pdf.js，通过解析后台base64格式文件解决跨域问题

1. 我使用的是通过npm 直接下的包
   通过npm在文件目录下安装pdf.js ：

   npm i pdfjs

   
   在node_modules包中会出现一个pdfjs-dist文件夹

2. 然后就是引入了
   在用到的组件中引入

   import PDFJS from 'pdfjs-dist'

3. 我这里是通过canvas渲染的方法，展示的pdf，直接上代码

   import PDFJS from 'pdfjs-dist'export default {
   data(){
   return {
   wid: 580, //刚进入页面中的pdf容器的宽度
   pdfDoc: null, //pdfjs 生成的对象
   pageNum: 1, //
   pageRendering: false,
   pageNumPending: null,
   scale: 1, //放大倍数
   page_num: 0, //当前页数
   page_count: 0, //总页数
   ctx: null,
   maxScale: 3,
   minScale: 1,
   bigOrsmall: false,
   loading:true,
   }
   },
   created() {
   this.loading = false //这个是我为了判断图片是否加载成功，所添的参数
   PDFJS.GlobalWorkerOptions.workerSrc = require('pdfjs-dist/build/pdf.worker.min.js')
   },
   mounted() {
   this.getBase64()
   },
   methods:{
   async getBase64(){
   //这里是我用来请求后台返回给我返回base64格式的文件发的ajax请求
   const { data:res } = await this.getRequest('/admin/pdfTranfeBase64',{ url:this.$route.query.fileUrl})
   // 通过上面的ajax，我得到base64格式数据 res
   /***********其实这里是base64解决跨域的关键************/
   let raw = window.atob(res) //从这里 到下面 得到 rawArray
   let rawLength = raw.length
   let rawArray = new Uint8Array(new ArrayBuffer(rawLength))
   for(var i = 0;i<rawLength;i++){
   rawArray[i] = raw.charCodeAt(i)
   }
   /********************************************/
   // 也就是这里！！！  这些语句是我们将base64格式的数据转成pdf.js可以解析的格式  !
   // (https://img-blog.csdnimg.cn/20190321174128417.png)这个是rawArray的最终格式 通过此链接可以查看图片
   console.log(rawArray)
   var that = this
   PDFJS.getDocument(
   rawArray // 然后直接将rawArray直接放到这
   ).then(function (pdfDoc_) {
   //初始化pdf
   that.pageNum = Number(that.lastPage)==0?1:Number(that.lastPage)
   that.pdfDoc = pdfDoc_
   that.page_count = that.pdfDoc.numPages
   that.renderPage(that.pageNum)
   })
   },
   renderPage(num) {
   //渲染pdf
   let vm = this
   this.pageRendering = true
   let canvas = this.$refs.canvas // Using promise to fetch the page
   this.ctx = canvas.getContext('2d');
   vm.pdfDoc.getPage(num).then(function (page) {
   vm.scale = vm.wid / page.getViewport(0.5).width //vm.wid是在data中定义的一个变量，最初设置的pdf的宽度
   var viewport = page.getViewport(vm.scale)
   canvas.height = viewport.height
   canvas.width = viewport.width // Render PDF page into canvas context
   var renderContext = {
   canvasContext: vm.ctx,
   viewport: viewport
   }
   var renderTask = page.render(renderContext) // Wait for rendering to finish
   renderTask.promise.then(function () {
   vm.pageRendering = false
   if (vm.pageNumPending !== null) {
   // New page rendering is pending
   this.renderPage(vm.pageNumPending)
   vm.pageNumPending = null
   }
   })
   })
   vm.page_num = vm.pageNum
   },
   },
   }