vue-pdf通过流的方式在线预览Pdf文件

简介

vue-pdf是一个支持在线预览pdf的vue插件。

网上较少的比较多的是直接打开一个pdf文件的uri链接。本文另辟蹊径，通过流的方式在线展示Pdf文件。

vue-pdf安装

安装命令

npm install --save vue-pdf

如果注册了淘宝源，也可以使用以下命令

cnpm install --save vue-pdf

使用

组件

<template>
  <el-dialog :visible.sync="viewPdf" :show-close="false" width="40%" height="100%" :modal="true"
             :close-on-click-modal="true"
             :close-on-press-escape="true" @close='closeDialog' class="el_dialog">
    <div v-show="fileType === 'pdf'" class="pdf">
      <pdf
        :src="src" ref="pdf" @progress="loadedRatio = $event"
        @num-pages="pageTotalNum=$event" :page="pageNum">
      </pdf>
      <el-button-group style="text-align: center">
        <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; color: #409EFF">{{ pageNum }} / {{ pageTotalNum }}</div>
    </div>
  </el-dialog>
</template>
<script>
import pdf from 'vue-pdf'
import { fileView } from '@/api/store/detection/test'

export default {
  components: { pdf },
  props: ['attachmentId', 'viewPdf'],
  data() {
    return {
      fileType: 'pdf',
      src: '',
      pageNum: 1,
      pageTotalNum: 1, // 总页数
      loadedRatio: 0 //当前页面的加载进度，范围是0 - 1 ，等于1的时候代表当前页已经完全加载完成了
    }
  },
  mounted() {
    this.getNumPages()
  },
  methods: {
    // 上一页
    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
    },
    getNumPages() {
      var _this = this
      fileView({
        attachmentId: this.attachmentId
      }).then(response => {

        let reader = new window.FileReader()
        // 使用readAsArrayBuffer读取文件, result属性中将包含一个 ArrayBuffer 对象以表示所读取文件的数据
        reader.readAsArrayBuffer(response)
        reader.onload = function(e) {
          const result = e.target.result
          const contentType = response.type
          // 生成blob图片,需要参数(字节数组, 文件类型)
          const blob = new Blob([result], { type: 'application/pdf' })
          // 使用 Blob 创建一个指向类型化数组的URL, URL.createObjectURL是new Blob文件的方法,可以生成一个普通的url,可以直接使用,比如用在img.src上
          if (window.createObjectURL != undefined) { // basic
            _this.src = window.createObjectURL(blob)
          } else if (window.webkitURL != undefined) { // webkit or chrome
            try {
              _this.src = window.webkitURL.createObjectURL(blob)
            } catch (error) {

            }
          } else if (window.URL != undefined) { // mozilla(firefox)
            try {
              _this.src = window.URL.createObjectURL(blob)
            } catch (error) {

            }
          }
          let loadingTask = pdf.createLoadingTask(this.src)
          loadingTask.promise.then(pdf => {
            _this.pageTotalNum = pdf.numPages
          }).catch(err => {
            console.error('pdf 加载失败', err)
          })
        }

      })
    },
    closeDialog() {
      this.$emit('resetViewPdf')
    }
  }
}

</script>
<style scoped>
.el-dialog {
  position: relative;
  margin: 0 auto 0px;
  background: #FFFFFF;
  border-radius: 2px;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 50%;
  height: 60%;
}

.el-dialog__body {
  border-top: 1px solid #dcdfe6;
  border-bottom: 1px solid #dcdfe6;
  max-height: 85% !important;
  min-height: 70%;
  overflow-y: auto;
}
-webkit-scrollbar {
  width: 2px;
  background-color: #ccc;
}

-webkit-scrollbar-thumb {
  background-color: #0ae;
}

-webkit-scrollbar-track {
  background-color: #ccc;
}


</style>

api

test.js

//查看附件
export function fileView(data) {
  return request({
    url: '/store/detection/test/fileView/',
    method: 'get',
    responseType: 'blob',
    params: data
  })
}