vue 文件流预览

vue 文件流预览

pdfjs-dist

vue-pdf

1. 安装

npm install --save vue-pdf

2. 引入

import pdf from 'vue-pdf'
// 在vue页面中引入组件
components:{
   pdf
 },

3. 使用

<div class="positionRelative" v-if="pdfUrl != null">
   <div class="changePDFpage">
       <el-button-group>
         <el-button type="primary" icon="el-icon-arrow-left" size="mini" @click="prePage">上一页</el-button>
         <el-button type="primary" size="mini" @click="nextPage">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
       </el-button-group>
       <div style="marginTop: 10px;font-weight: bold; color: #00706B">{{ pageNum }} / {{ pageTotalNum }}</div>
   </div>
   <pdf 
     ref="pdf"
     :src="pdfUrl" 
     :page="pageNum"
     @progress="loadedRatio = $event"
      @page-loaded="pageNum=$event"
     @num-pages="pageTotalNum=$event">
   </pdf>
</div>

data() {
  return {
    pdfUrl:'',
    pageNum: 1,
    pageTotalNum: 1, // 总页数
    loadedRatio: 0, // 当前页面的加载进度，范围是0-1 ，等于1的时候代表当前页已经完全加载完成了
  }
},

method:{
	// 获取文件流并生成url
	getFileBlob(){
      this.$api
        .downloadFile({ fileId: this.pdfid })
        .then((res) => {
          if (res.code) {
            this.$message({
              type: "error",
              message: res.msg,
            });
          } else {
            let blob = new Blob([res],{type: 'application/pdf'}); //文件流处理
            const url = window.URL.createObjectURL(blob);
            this.pdfUrl = url
          }
        })
        .catch((err) => {});
    },
	// 上一页
    prePage() {
      let page = this.pageNum
      page = page > 1 ? page - 1 : this.pageTotalNum
      this.pageNum = page
    },
    // 下一页
    nextPage() {
      let page = this.pageNum
      page = page < this.pageTotalNum ? page + 1 : 1
      this.pageNum = page
    }
}

iframe标签

1. 使用

 <iframe ref="pdfCotainer" :src="pdfUrl + '#toolbar=0'" width="100%" style="height: 800px; overflow:scroll"></iframe>

2. 获取pdf文件流并生成url，如上；

注意：

1. 可以使用pdfUrl + '#toolbar=0’去掉iframe上的操作行，但是无法兼容所有浏览器；
2. 获取文件流并生成url时，本地没问题，部署线上iframe报错，最后通过在接口处设置 responseType: 'arraybuffer’解决；

 downloadFile: (data) => 
    request({
      url: '/system/file/get',
      method: 'get',
      responseType: 'arraybuffer',
      params: data,
    }),

直接打开新页签

window.open(url, "_blank");

注意，该种方式可预览多种格式的文件，包括：

1. JPG、PNG、jpg、png
2. doc、docx、dot、dotx、dox
3. pdf
4. wps、wpt、dps、dpt、ppt、pot、pps、pptx、potx、ppsx
5. xlsx、xls、xlt、et、ett
6. txt