页面预览pdf

点击查看代码

<template>
  <el-dialog
    title="发货单"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    custom-class="packing-dialog"
    width="47%"
    :before-close="handleClose"
    center
  >
    <ul class="contract-box">
      <el-empty description="暂无文件" v-if="!fileList.length"></el-empty>
      <el-carousel indicator-position="none"  v-else height="600px">
        <el-carousel-item v-for="val in fileList" :key="val">
          <iframe
            :src="val"
            width="100%"
            height="600"
            id="pdfViewer"
          ></iframe>
        </el-carousel-item>
      </el-carousel>
    </ul>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="download()" v-if="fileList.length" size="small">下载</el-button>
      <el-button @click="handleClose" size="small">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getPackingList, downloadFiles } from "@/api/order/index";
export default {
  props: {
  },
  components: {},
  data() {
    return {
      dialogVisible: false,
      fileList: [],
      orderId: "",
      fileItem: "",
    };
  },
  methods: {
    open(orderId) {
      this.fileList = [];
      //获取文件地址
      getPackingList({
        orderId
      }).then((res) => {
        if (res.success && res.result.length) {
          for (let index = 0; index < res.result.length; index++) {
            //获取pdf文件
            downloadFiles({
              name: res.result[index].objName
            }).then((data) => {
              //ArrayBuffer转URL
              const blob = new Blob([data], { type: 'application/pdf' })
              this.fileList.push(URL.createObjectURL(blob));
            });
          }
        }
      });
      this.dialogVisible = true;
    },
    handleClose() {
      this.dialogVisible = false;
      //清除缓存
      for (let index = 0; index < this.fileList.length; index++) {
        URL.revokeObjectURL(this.fileList[index]);
      }
      this.fileList.length = 0;
    },
    async download() {
      for (let index = 0; index < this.fileList.length; index++) {
        const link = document.createElement('a');
        link.href = this.fileList[index];
        link.download = `发货单${index+1}.pdf`;
        link.target = "_blank";
        link.click();
      }
    }
  },
  created() {
   
  },
};
</script>
<style lang="scss" scoped>
.dialog-footer {
  padding-top: 20px;
  text-align: center;
}
.contract-box {
  width: 100%;
  // height: 550px;
  // overflow-y: auto;
  li {
    width: 100%;
    img {
      width: 100%;
      display: block;
    }
    iframe {
      // width: 100%;
      display: block;
    }
  }
}
</style>