web端vue2使用pdf发票内容显示不全的问题,展示xls和xlsx问题

admin管理员组

文章数量:1648937

1.安装pdf的版本要求(注意版本)

//pdf安装版本
 "vue-pdf-signature": "^4.2.7",
 "pdfjs-dist": "^2.5.207"
//

安装后vue-pdf打包后会有问题

建议安装vue-pdf-signature替换掉 vue-pdf

2.在页面中的使用(如下示例代码,样式自行调整)

<template>
  <div>
    <el-dialog title="pdf和xls文档展示" :visible.sync="dialogStatus" width="50%" v-if="dialogStatus" :before-close="handleClose"
      append-to-body>
      <!-- 展示文档开始 -->
      <el-table :data="excelData" style="width: 100%">
        <el-table-column v-for="(value, key, index) in excelData[excelData.length - 1]" :key="index" :prop="key"
          :label="key"></el-table-column>
      </el-table>
      <!-- 展示文档结束 -->
      <div>
        <!-- 展示pdf开始 -->
        <div>
          <pdf style="height:100%;width:'600px'" :src="srcurl" :page="pdfPage" @num-pages="pageCount = $event"
            @page-loaded="pdfPage = $event"></pdf>
        </div>
        <!-- 展示pdf结束 -->
        <!-- pdf页码展示开始 -->
        <div slot="footer" class="dialog-footer">
          <div style="width: 100%;display: flex;justify-content: center">
            <div>
              <el-button type="primary" @click="changePdfPage(0)">上一页</el-button>
              <span> {{ pdfPage }} / {{ pageCount }} </span>
              <el-button type="primary" @click="changePdfPage(1)">下一页</el-button>
            </div>
          </div>
        </div>
        <!-- pdf页码展示结束 -->
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button>取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>

// 引入vue-pdf-signature
import pdf from "vue-pdf-signature";
// 引入CMapReaderFactory是避免有些字体无法展示
import CMapReaderFactory from 'vue-pdf-signature/src/CMapReaderFactory.js'
export default {
  name: '',
  props: {},

  data() {
    return {
      srcurl: "",
      pageCount: 0,
      excelData: []
    }
  },
  methods: {
    handleClose(){

    },
    setTableList(sheetName) {
      let work = this.workbook.Sheets[sheetName];
      // 这是要展示的数据内容
      this.excelData = XLSX.utils.sheet_to_json(work);
    },
    changePdfPage(val) {
      if (val === 0 && this.pdfPage > 1) {
        this.pdfPage--;
      }
      if (val === 1 && this.pdfPage < this.pageCount) {
        this.pdfPage++;
      }
    },
    // 在线查看excel文件
    readWorkbookFromRemoteFile(url) {
      let xhr = new XMLHttpRequest();
      xhr.open("get", url, true);
      xhr.responseType = "arraybuffer";
      let _this = this;
      xhr.onload = function (e) {
        if (xhr.status === 200) {
          let data = new Uint8Array(xhr.response);
          let workbook = XLSX.read(data, { type: "array" });
          let sheetNames = workbook.SheetNames; // 工作表名称集合
          _this.workbook = workbook;
          _this.setTableList(sheetNames[0]);
        } else {
          _this.$nextTick(() => {
            _this.excelData = []
          })

        }
      };
      xhr.send();
    },
    getAnnex(row) {

      let arr;
      arr = row.testReportFile.name.substr(-3)
      // 具体函数调用位置根据情况而定
      if (arr === "lsx" || arr === "xls") {
        //展示xlsx或者xls文件
        this.readWorkbookFromRemoteFile(row.testReportFile.url);
        this.dialogStatus = true
      } else {
        this.getPdf(row)
      }

    },

    getPdf(url) {
      this.srcurl = pdf.createLoadingTask({
        url:url, //可以简写
        // pdf内容文字丢失
        //cMapUrl: '',//引入pdf.js字体
        cMapPacked: true,
        // 动态文字不展示问题
        CMapReaderFactory
      })
      this.srcurl.promise.then(pdf => {
        this.pageCount = pdf.numPages // 这里拿到当前pdf总页数
      }).catch(err => {
        console.log('err', err)
      })
      this.dialogStatus = true
    },

  }
}

</script>

本文标签： 不全发票内容webPDF