快捷導航

vue如何使用pdf.js實現(xiàn)在線查看pdf文件功能

更新時間：2024年03月26日 11:02:23 作者：碼不停T

PDF.js是一個開源的JavaScript庫,用于在網(wǎng)頁上渲染和顯示PDF文件,在Vue中使用PDF.js來預覽PDF文件是很常見的需求,這篇文章主要給大家介紹了關(guān)于vue如何使用pdf.js實現(xiàn)在線查看pdf文件功能的相關(guān)資料,需要的朋友可以參考下

需求：

有一個列表頁，用戶點擊查看，彈層展示后臺接口返回的pdf內(nèi)容(不是文件、地址之類的，亂碼的pdf銘文(二進制文件流))

1、pdf.js安裝

npm install --save vue-pdf

2、正文代碼

<template>
    <div>
		<el-table :data="dataList">
	        <el-table-column prop="fieldName" width="120" label="操作">
	          <template slot-scope="scope">
	            <span @click="look(scope.row)">查看</span>
	          </template>
	        </el-table-column>
       </el-table>
	   <el-dialog title="預覽" :visible.sync="dialogVisible" :before-close="closePdf">
      	 <pdf v-for="i in numPages" :key="i" :src="pdfSrc" :page="i" />
       </el-dialog>
	</div>
<template>
<script>
	import pdf from 'vue-pdf'
	export default {
	  components: {
	    pdf
	  },
	  data() {
   		 return {
  		 	  dialogVisible: false,
		      numPages: 1,
		      pdfSrc:"",
		      close:false,
   		 }
   	  },
   	  methods: {
		// 查看預覽
	    look(row) {
	      const that = this;
	      that.pdfSrc = "";
		  // 接口文件地址（接口入?yún)⑵闯鰜淼穆窂剑?
	      const url = `${Host}xxxxxx/xxxx/xxx?fileId=${row.fileId}&amp;fileName=${row.fileName}.pdf`;
		  // 如果調(diào)用接口（接口的responseType一定要是blob，默認json，不然解析出來的pdf是空白的）后拿的返回的值（亂碼的pdf銘文(二進制文件流)）則需要轉(zhuǎn)一下
		  // const url = window.URL.createObjectURL(new Blob([res]), { // res為接口返回值
			// type: "application/msword"
		  // });
	      that.pdfSrc = pdf.createLoadingTask(url)
	      that.pdfSrc.promise.then(pdf => {
	        that.dialogVisible = true;
	        that.numPages = pdf.numPages
	        //保證pdf加載成功，否則不能關(guān)閉彈層
	        setTimeout(() => {
	          that.close = true;
	        }, 2000);
	      })
	      .catch(error => {
	        that.$message.error("無效的PDF文件！");
	      })
	    },
	    //此方法解決第一次查看pdf文字沒有加載完成影響后續(xù)查看
	    closePdf(done){
	      if(this.close) {
	        this.numPages = 1;//必須重置，多次查看會出現(xiàn)頭部內(nèi)容缺失
	        this.close = false;
	        done();
	      } else {
	        this.$message.warning("PDF文件加載中");
	      }
	    }
	  }
	}
</script>