jianshui-all/jianshui-ui/src/views/sdinvoicefile/index.vue

<template>
  <div class="invoice-preview">

    <!-- 使用Flex布局来居中显示 -->
    <div class="center-container">
      <!-- 下载PDF按钮 -->
      <div style="float:left;">
        <el-button type="primary" @click="downloadPDF" class="download-button">下载PDF</el-button>
        <el-button type="primary" @click="downloadPDF" class="download-button">下载OFD</el-button>
        <el-button type="primary" @click="downloadPDF" class="download-button">下载XML</el-button>
      </div>

      <img :src="invoiceImageUrl" alt="发票图片损坏" class="invoice-image">

    </div>
  </div>
</template>

<script>
import {getFilePreview} from "@/api/sdInvoicefile/sdinvoicefile";

export default {
  data() {
    return {
      // 替换为你的发票图片base64
      invoiceImageUrl: ''
    };
  },
  mounted() {
    const id = this.$route.params.id;
    console.log('id:', id);
    this.filePreview(id);
  },
  methods: {
    filePreview(id){
      this.loading = true;
      getFilePreview(id).then(response => {
        console.info("aa="+response);
        this.invoiceImageUrl = response;
        // this.$forceUpdate();

      });
    },
    // 下载PDF按钮点击事件
    downloadPDF() {
      // 在这里执行下载PDF的逻辑
      // 可以使用第三方库或服务进行PDF生成，然后提供下载链接
      // 例如：window.open('your_pdf_download_link.pdf', '_blank');
    },
  },
};
</script>

<style scoped>
.invoice-preview {
  width: 100%;
  height: 100vh; /* 设置容器的高度为整个视口高度 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.center-container {
  display: flex;
  flex-direction: column; /* 将子元素垂直排列 */
  justify-content: center;
  align-items: center;
  height: 80vh; /* 或者根据需要设置一个固定高度 */
  flex: 1; /* 占据剩余的垂直空间 */
}

.invoice-image {
  max-width: 90%;
  max-height: 90%;
}

.download-button {
  margin-bottom: 10px;
}
</style>