front/front-vue/src/views/service/credit/pdfShow.vue

<template>
    <div>
        <!-- <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button> -->

      <!--   <el-dialog  :visible.sync="dialogVisible" width="80%" height="1080px;" :before-close="handleClose" append-to-body	> -->
            <el-tabs v-model="activeName" type="card">
                <el-tab-pane v-for="item in pdfFileList" :key="item.value" label="合同信息" name="first"  style="height:780px;">
                    <embed :src="'data:application/pdf;base64,' + item.base64"  type="application/pdf" title="Embedded PDF" style="overflow: auto; width: 100%; height: 100%;"/>
                </el-tab-pane>
                <!-- <el-tab-pane label="申请协议" name="first"  style="height:780px;">
                    招采融信申请协议
                    编号：ZCRXKL-20210712001
                    本《供应链金融服务平台融信转让协议》（以下简称为“本协议”、“《融信转让
                    协议》”）由融信转让人、融信受让人于本协议约定的时间在北京市东城区签署：
                    融信转让人：B 供应商 2_TSCF 培训专用
                    住所：成都市高新区新园南二路一号
                    法定代表人：张健
                    融信受让人：B 供应商 1_TSCF 培训专用
                    住所：成都市高新区新园南二路一号
                    法定代表人：张健 鉴于：
                    (A) 融信反向保理平台由中粮资本科技有限责任公司建设并运营，向用户提供
                    应收账款管理、转让、融资等服务。
                    (B) 融信转让人与融信受让人（以下简称为“双方”）均为融信反向保理平台的
                    用户。
                    (C) 融信转让人现持有融信，享有融信项下的应收账款债权。
                    (D) 双方均同意使用融信反向保理平台的服务，现融信转让人拟将融信项下应
                    收账款债权全部或部分通过融信反向保理平台转让给融信受让人，融信受
                    因此，经双方协商一致，签订本协议，约定如下:
                </el-tab-pane>
                <el-tab-pane label="配置管理" name="second" style="height:780px;">
                    住所：成都市高新区新园南二路一号
                    法定代表人：张健
                    融信受让人：B 供应商 1_TSCF 培训专用
                    住所：成都市高新区新园南二路一号
                    法定代表人：张健 鉴于：
                    (A) 融信反向保理平台由中粮资本科技有限责任公司建设并运营，向用户提供
                    应收账款管理、转让、融资等服务。
                    (B) 融信转让人与融信受让人（以下简称为“双方”）均为融信反向保理平台的
                    用户。
                    (C) 融信转让人现持有融信，享有融信项下的应收账款债权。
                    (D) 双方均同意使用融信反向保理平台的服务，现融信转让人拟将融信项下应
                    收账款债权全部或部分通过融信反向保理平台转让给融信受让人，融信受
                    因此，经双方协商一致，签订本协议，约定如下:</el-tab-pane> -->

            </el-tabs>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
              <!--   <el-button type="primary" @click="selectChildType">确 定</el-button> -->
            </span>
        <!-- </el-dialog> -->
    </div>
</template>


<script>
//import PDFObject from 'pdfobject'
export default {
    props : ['pdfFileList'],
    data() {
        return {
            activeName: "first",
            dialogVisible: false,
            dialogTableVisible: false,
            dialogFormVisible: false,
            form: {
                name: "",
                region: "",
                date1: "",
                date2: "",
                delivery: false,
                type: [],
                resource: "",
                desc: "",
            },
            formLabelWidth: "120px",
        };
    },
    created() {
        this.dialogVisible = true;
        for(var i = 0 ; i < this.pdfFileList.length; i++){
            var base64 = this.pdfFileList[i].base64;
            <embed src="data:application/pdf;base64,"  type="application/pdf" title="Embedded PDF" style="overflow: auto; width: 100%; height: 100%;"/>
        } 
    },
    methods: {
        handleClose(done) {
            this.$confirm("确认关闭？")
                .then((_) => {
                    done();
                })
                .catch((_) => {});
        },
        selectChildType(){
            this.$parent.selectType();
        }
    },
};
</script>