转载：vue 预览PDF（文件流格式） - 微凉_1993 - 博客园

 

1.安装

npm install vue-pdf-signature

2.引入

// 引入pdf
import pdf from 'vue-pdf-signature';
import CMapReaderFactory from 'vue-pdf-signature/src/CMapReaderFactory';


components: { pdf,CMapReaderFactory }

3.tmplate

<template>
  <div>
        <iframe  ref="pdfRef"
              :src="wordDialog.pdfSrc"
              style="height: 740px;width: calc(100% - 38px);
              margin-left: 15px;" 
        frameborder="0"></iframe>

...
  </div>
</template>

3.method显示 ，res.data是接口返回值的BLOB

let _this=this;
      _this.axios({
        method: "get",
        url:process.env.VUE_APP_BASE_PRE + "/status-warning/readRuleFile",
        responseType: 'blob',
        params: {
          uuid:xxxx
        },
      }).then(function (res) {

       

        _this.$nextTick(() => {


           const blob = new Blob([res.data], { type: 'application/pdf' })
            _this.wordDialog.pdfSrc =window.URL.createObjectURL(blob)
            _this.wordDialog.loadPdf = true
            // window.open(_this.wordDialog.pdfSrc)//新窗口打开，借用浏览器去打印
            // this.$refs.pdfRef.print();//这个打印调不起来，一直显示print方法找不到<br>});



        });
      })
        .catch(function (err) {
          console.log(err);
        });