打印、导出

zhouwx

2024-10-14 64352347cdeab2f4f5c1d5e3fa32548bfad1a682

打印、导出

 src/main.js

@@ -39,6 +39,8 @@
import DictData from '@/components/DictData'
import '@/utils/filter'
import '@/utils/validate'
import Print from 'vue-print-nb'

// 全局方法挂载
Vue.prototype.getDicts = getDicts
Vue.prototype.getConfigKey = getConfigKey
@@ -62,6 +64,7 @@
Vue.use(directive)
Vue.use(plugins)
Vue.use(VueMeta)
Vue.use(Print)
DictData.install()

/**

 src/views/onlineEducation/classCertManage/index.vue

@@ -69,7 +69,7 @@
        <template #default="scope">
          <el-button size="mini" type="text" style="color: #1890ff" @click="viewPic(scope.row)">查看</el-button>
          <el-button size="mini" type="text" style="color: #1890ff" @click="downloadByBlob(scope.row)">下载</el-button>
          <el-button size="mini" type="text" style="color: #1890ff">打印</el-button>
          <el-button size="mini" type="text" style="color: #1890ff" @click="print(scope.row)">打印</el-button>
        </template>
      </el-table-column>
    </el-table>
@@ -92,10 +92,26 @@
        </el-image>
      </div>
    </el-dialog>
    <el-dialog
      :visible.sync="printDialog"
      width="500px"
      :before-close="handlePrintClose">
      <div style="display: flex;flex-direction: column;align-items: flex-end">
        <el-button type="primary" style="margin-bottom: 5px" v-print="'#printPic'">打印</el-button>
      </div>
      <div style="display: flex;justify-content: center" ref="printPic" id="printPic">
        <el-image
          style="width: 85%; height: auto;margin-top: 10px"
          :src="printUrl"
          >
        </el-image>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import { listBatch, listQuestion } from '@/api/onlineEducation/student'
import { listPlatSelect } from '@/api/onlineEducation/plat'
import moment from 'moment/moment'
@@ -128,17 +144,34 @@
      trainOrgList: [],
      jsonData: [],
      json_fields: {
        ID: "id",
        姓名: "name",
        身份证号: "idcard",
        推送平台: "institutionName",
        所属机构: "trainOrgName",
        批次: "batchName",
        证书生成时间: "certTime",
        'ID': {
          field: 'id',
          callback: value => {
            return '&nbsp;'+value
          }
        },
        '姓名': "name",
        '身份证号': {
          field: 'idcard',
          callback: value => {
            return '&nbsp;'+value
          }
        },
        '推送平台': "institutionName",
        '所属机构': {
          field: 'trainOrgName',
          callback: value => {
            return '&nbsp;'+value
          }
        },
        '批次': "batchName",
        '证书生成时间': "certTime",
      },
      picDialog: false,
      viewUrl: '',
      srcList: []
      srcList: [],
      printDialog: false,
      printUrl: '',
    };
  },
  created() {
@@ -226,6 +259,15 @@
      // this.srcList = []
      this.picDialog = false
    },
    handlePrintClose() {
      this.printUrl = ''
      this.printDialog = false
    },
    print(val){
      this.printUrl = val.certUrl

      this.printDialog = true
    },
    downloadByBlob(val) {
      let image = new Image()
      image.setAttribute('crossOrigin', 'anonymous')
@@ -254,3 +296,12 @@
  }
};
</script>
<style media="printPic" scoped>
@page {
  margin: 0; /* this affects the margin in the printer settings */
  display: block;
  width: 100%;
  overflow: hidden;
}

</style>