PDF预览及下载

PDF 下载,预览代码实现

pdf 预览

import pdf from 'vue-pdf/src/vuePdfNoSss';
import BaseLoading from 'component/loading/base-loading';

export default {
  components: {
    pdf,
    BaseLoading,
  },
  data() {
    return {
      src: '',
      onProgress: 0,
      numPages: undefined,
    };
  },
  props: {},
  computed: {},
  watch: {},
  methods: {
    // 下载pdf方式 展示pdf
    open(id) {
      this.clear();
      this.$refs.previewRef.open();
      try {
        this.$http.post("/api/company/bill/download", {
          id,
        }, {
          responseType: 'blob'
        }).then((res) => {
          let url = this.getObjectURL(res);
          this.showPDF(url)
          return;
        });
      } catch (error) {
        console.error('error: ', error);
      }
    },
    // 转化 文件流=>URL
    getObjectURL(file) {
      var binaryData = [];
      binaryData.push(file);
      let url = null;
      if (window.createObjectURL !== undefined) { // basic
        url = window.createObjectURL(new Blob(binaryData, {
          type: 'application/pdf'
        }));
      } else if (window.webkitURL !== undefined) { // webkit or chrome
        try {
          url = window.webkitURL.createObjectURL(new Blob(binaryData, {
            type: 'application/pdf'
          }));
        } catch (error) {}
      } else if (window.URL !== undefined) { // mozilla(firefox)
        try {
          url = window.URL.createObjectURL(new Blob(binaryData, {
            type: 'application/pdf'
          }));
        } catch (error) {}
      }
      return url;
    },
    // 展示pdf
    showPDF(url) {
      setTimeout(() => {
        this.src = new pdf.createLoadingTask(url, {
          onProgress: this.handleProgress,
        });
        this.src.promise.then(pdf => {
          this.numPages = pdf.numPages;
        });
      }, 100)
    },
    // 清除操作，重置参数
    clear() {
      this.src = ''
      this.onProgress = 0
      this.numPages = undefined
    },
    // 进度
    handleProgress(e) {
      const {
        loaded,
        total
      } = e
      this.onProgress = +Number(loaded / total * 100).toFixed(1)
    },
    // 关闭弹窗
    close() {
      this.$refs.previewRef.close();
    },
  },
  created() {},
  mounted() {}
}

#preview {
  .sweet-modal {
    max-height: 600px;
    overflow-y: scroll;
  }

  .doc-webhook-pdf {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .show-pdf {
    width: 100%;
    height: 100%;
  }
}

pdf 下载

function downFile(res, fileName) {
  const blob = new Blob([res], {
    type: `application/pdf;charset=UTF-8`
  });

  if (window.navigator.msSaveOrOpenBlob) {
    // 兼容ie11
    window.navigator.msSaveOrOpenBlob(blob, fileName);
  } else {
    const url = URL.createObjectURL(blob);
    const downloadElement = document.createElement("a");
    downloadElement.href = url;
    downloadElement.download = fileName;
    document.body.appendChild(downloadElement);
    downloadElement.click();
    downloadElement.remove();
    URL.revokeObjectURL(url);
  }
}

this.showLoading = true;
try {
  this.$http.post("/api/company/bill/download", {
    id,
  }, {
    responseType: 'blob'
  }).then((res) => {
    this.showLoading = false;
    downFile(res, `${bill_no}.pdf`)
    return;
  });
} catch (error) {
  console.error('error: ', error);
}