Vue单页/多页PDF文档流/OSS的预览、打印、下载

安装插件

npm install vue-pdf
yarn add vue-pdf

文档链接：https://github.com/FranckFrei...

直接使用插件的打印，会出现乱码，需要修改 node_modules 源码
具体代码的修改参照下方文档链接
文档链接：https://github.com/FranckFrei...

一、请求后端，后端返回文档流的形式：

预览

预览样式（以多页为例）

html

// 其他代码省略...
<div class="max-height">
  // 多页（包含只有一页的情况）
  <pdf v-for="i in numPages" :key="i" :src="pdfSrc" :page="i" style="width: 100%" ref="waybillRef"></pdf>
  // 单页（打乱原有布局，组件放在这里是为了演示方便）
  <pdf :src="codeSrc" ref="codeRef"></pdf>
</div>

script

import pdf from 'vue-pdf';
import { getPDF } from '@/assets/scripts/utils'; // 需要请求的后台PDF文档流接口

/**
 * getPDF说明：
 * 后端有多个不同的pdf接口，前端根据url控制，将后端文档流和文件名称，用Promise的方式返回
 * 其他代码略...
 * axios
    .get(url, { responseType: 'blob' })
    .then((response) => {
      let fileName = decodeURIComponent(
        response.headers['content-disposition'].replace(
          /.+filename=(.+)/g,
          '$1'
        )
      )
      resolve({ data: response.data, name: fileName })
    })
    .catch((error) => {
      reject(error)
    })
 *
**/

export default {
  components: { pdf },
  data() {
    return {
      pdfSrc: '',
      codeSrc: '',
      numPages: null,
    }
  },
  methods: {
    // 进入页面就请求后端接口用于预览
    getPageData() {
      // 其他代码省略...
      getPDF(url).then(res => {
        let blob = window.URL.createObjectURL(
          new Blob([res.data], {
            type: 'application/pdf;charset=UTF-8',
          })
        );
        this.pdfSrc = pdf.createLoadingTask(blob);
        this.pdfSrc.promise.then(pdf => {
          this.numPages = pdf.numPages
        })
      })
    }
  }
}

打印

print(ref) {
  if (ref==='waybillRef') {
    // 多页是循环来的，ref是数组，需要加上下标
    this.$refs[ref][0].print();
  } else {
    this.$refs[ref].print();
  }
},

多页的写法--打印多页的样式（暂时bug未解决，见下图）

多页的写法--打印单页的样式

单页的写法--打印单页的样式

下载

script

import { downloadPDF } from '@/assets/scripts/utils';

/**
 * downloadPDF说明：
 * 下载PDF文件流-->通过url先调用前文的getPDF-->前端做下载
 * 其他代码略...
 * getPDF(url).then(res => {
     let url = window.URL.createObjectURL(
        new Blob([res.data], {
          type: 'application/pdf;charset=UTF-8',
        })
      );
      let link = document.createElement('a');
      link.style.display = 'none';
      link.href = url;
      link.download = res.name;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      window.URL.revokeObjectURL(url);
  })
*
**/

method: {
  download() {
    downloadPDF(url);
  },
}

下载后的结果

二、请求OSS, 返回url的形式：

【页面说明】（其中下载就是前述【下载后的结果】部分）

预览

功能：点击PDF文件的放大icon，弹出预览弹窗

html

// 其他代码省略...
<div class="max-height">
  // 因为这里的页面的pdf页数不确定，故使用多页
  <pdf v-for="i in numPages" :key="i" :src="pdfSrc" :page="i" style="width: 100%></pdf>
</div>

script

// 其他代码省略...
import pdf from 'vue-pdf';

export default {
  components: { pdf },
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      numPages: null,
    }
  },
  methods: {
     // 点击放大
    handlePreview(file) {
      this.dialogImageUrl = pdf.createLoadingTask(file.url);
      this.dialogImageUrl.promise.then(pdf => {
        this.numPages = pdf.numPages // 这里拿到当前pdf总页数
      })
      this.dialogVisible = true;
    }
  }
}

预览样式（以多页为例）