vue2.0移动端 使用vue-pdf插件实现PDF文件流在线预览

如果遇到电子签章不显示问题，滑到最下方

npm install --save vue-pdf@4.2.0
npm install pdfjs-dist@2.5.207

如果后台返回的文件流为图片 — 只需要将 <pdf :src="src/> 改为 <img :src="src/">即可

<template>
  <div>
    <!-- pdf预览 -->
    <div>
      <pdf
        :page="pageNum"
        :src="src"
        @progress="loadedRatio = $event"
        @num-pages="pageTotalNum = $event"
      />
      <!--  -->
      <div class="pdf-btn" v-if="pageTotalNum > 1">
        <van-button round type="info" size="small" @click="prePage"
          >上一页</van-button
        >
        <span class="pdf-span">{{ pageNum }}</span>
        <span>/</span>
        <span> {{ pageTotalNum }}</span>
        <van-button round type="info" size="small" @click="nextPage"
          >下一页</van-button
        >
      </div>
      <van-empty v-else description="预览失败" />
    </div>
  </div>
</template>

在接口API函数中声明 responseType: 'blob'

export function viewPdf(data) {
    return request.post(
        "接口地址",
        data,
        { token: true, responseType: 'blob' }
    )
}

后台返回的文件流

<script>
import pdf from "vue-pdf";
import { viewPdf } from "@/api/financing";
export default {
  components: {
    pdf,
  },
  data() {
    return {
      src: "",//文件地址
      pageNum: 1, //当前页
      pageTotalNum: 1, //默认总页数
    };
  },
  mounted() {
    this.loadPdf();
  },
  methods: {
    loadPdf() {
    	//viewPdf():封装的api函数，params:接口入参
        viewPdf(params).then((res) => {
        //blob参数是一个File对象或者Blob对象
		//objectURL是生成的对象URL.通过这个URL,可以获取到所指定文件的完整内容
          this.src = window.URL.createObjectURL(new Blob([res.data]));
        });
    },
    //上一页
    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;
    },
  },
};
</script>

在axios拦截器中设置返回数据类型为"blob"时的操作

service.interceptors.response.use(
  response => {
	 if (response.request.responseType == "blob") {
           return response;
          } else {
            return response.data;
          }
	  }
)

电子签章不显示解决方案

一、 在node_modules/pdfjs-dist/build/pdf.worker.js注释掉下方代码

this.setFlags(_util.AnnotationFlag.HIDDEN);

二、 在node_modules/pdfjs-dist/es5/build/pdf.worker.js注释下方代码

_this3.setFlags(_util.AnnotationFlag.HIDDEN);