PDF二进制数据流的阅览与打印

PDF二进制流数据的阅览与打印

安装：

npm install --save vue-pdf

使用：

在需要使用vue-pdf的页面中，使用到的pdf组件的关键代码就这两行。

import Pdf from 'vue-pdf';

<pdf
  :src="src2" 
  :page="currentPage" 
  @num-pages="pageCount=$event" 
  @page-loaded="currentPage=$event"
  @loaded="loadPdfHandler">
 </pdf> 

参数解析

src:pdf地址，可传入.pdf文件，blob二进制流文件亦可。

page：pdf的页码。

num-pages：pdf的总页数，currentPage与之绑定后，可得到pdf文件的总页数。

   // pdf加载时
      loadPdfHandler (e) {
        this.currentPage = 1 // 加载的时候先加载第一页
      },

pdf打印：

操纵pdf组件的DOM方法：@click="$refs.myPdfComponent.print()"

        <div class="scrollBox-right">
          <div class="print" @click="$refs.myPdfComponent.print()"></div>
        </div>

在npm 官网中提到：

https://www.npmjs.com/package/vue-pdf

当然了，如果后台返回的直接是后台文件的pdf文件，直接将数据在Vue-pdf上一一绑定即可。如果是二进制流，还需解析后绑定。

二进制流转blob地址：

    // 在线预览,将二进制流文件转换为blob地址
    getObjectURL(file) {
      let url = null;
      if (window.createObjectURL != undefined) {
        // basic
        url = window.createObjectURL(file);
      } else if (window.webkitURL != undefined) {
        // webkit or chrome
        try {
          url = window.webkitURL.createObjectURL(file);
        } catch (error) {}
      } else if (window.URL != undefined) {
        // mozilla(firefox)
        try {
          url = window.URL.createObjectURL(file);
        } catch (error) {}
      }
      return url;
    },
        
        
        
        
    // 获取二进制文件流并转为url
    getUrl() {
      const baseUrl = process.env.VUE_APP_BASE_API;
      axios({
        method: 'post',
        url: `${baseUrl}/file/downloadFile?fileId=${id}`,
        headers: {
          'Content-Type': 'application/json;charset=UTF-8',
          token: localStorage.getItem('token'),
        },
        responseType: 'blob',
      }).then((res) => {
        this.url = this.getObjectURL(res.data);
        this.showPdfList.push({
          url: this.url,
          name: this.DataList.reportTitle,
          time: this.DataList.createTime,
        });
        // this.previewList.push(this.url);
      });
    },

转换后的流文件长这样，供新手玩家参考。