<!-- Ups --> <script name="ResourceEnvironmentUPSDetail" lang="ts" setup> import { ElLoading, ElMessage, ElMessageBox } from 'element-plus' // import * as pdfjsLib from 'pdfjs-dist' import { getStreamUpsResistance as getStream } from '@/api/resource/environmentTest' import filePreview from '@/components/filePreview/filePreview.vue' import { getBase64, getObjectURL } from '@/utils/download' import { exportFile } from '@/utils/exportUtils' import { printPdf } from '@/utils/printUtils' const loading = ref(false) // 表单加载状态 const infoId = ref('') // id const printFileName = ref('') // 文件名 const $route = useRoute() const $router = useRouter() const fromPage = ref('') // 来源页面 const pdfUrl = ref('') // pdfurl const pdfStream = ref() as any // pdf流 // --------------------------------------路由参数---------------------------------------------- // 从路由中获取页面类型参数 if ($route.params) { if ($route.params.id) { infoId.value = $route.params.id as string } } // -----------------------------------------按钮-------------------------------------------------- // 关闭新增页面的回调 const close = () => { $router.back() } // 导出word const exportWord = () => { const loading = ElLoading.service({ lock: true, text: '加载中...', background: 'rgba(255, 255, 255, 0.6)', }) getStream({ id: infoId.value, pdf: false }).then((res) => { exportFile(res.data, 'UPS蓄电池内阻测试记录.doc') loading.close() }) } // 导出pdf const exportPdf = () => { exportFile(pdfStream.value, 'UPS蓄电池内阻测试记录.pdf') } // 打印 const print = () => { const blobUrl = URL.createObjectURL(pdfStream.value) printPdf(blobUrl) } // ----------------------------------------------------------------------------------------------- /** * 初始化 */ function init() { const loading = ElLoading.service({ lock: true, text: '加载中...', background: 'rgba(255, 255, 255, 0.6)', }) getStream({ id: infoId.value, pdf: true }).then((res) => { pdfStream.value = new Blob([res.data]) getBase64(res.data).then((res) => { pdfUrl.value = res as string }) // pdfjsLib.GlobalWorkerOptions.workerSrc = '/pdf.worker.js' loading.close() }) } // -----------------------------------------钩子-------------------------------------------------- onMounted(() => { init() }) </script> <template> <app-container> <detail-page v-loading="loading" title="UPS蓄电池内阻测试记录"> <template #btns> <el-button v-if="fromPage !== 'equipment'" type="primary" @click="exportWord"> 导出word </el-button> <el-button v-if="fromPage !== 'equipment'" type="primary" @click="exportPdf"> 导出pdf </el-button> <el-button v-if="fromPage !== 'equipment'" type="primary" @click="print"> 打印 </el-button> <el-button type="info" @click="close"> 关闭 </el-button> </template> </detail-page> <div style="display: flex;justify-content: center; margin-top: 10px;width: 100%;"> <file-preview :pdf-url="pdfUrl" style="width: 70%;" /> </div> </app-container> </template> <style lang="scss" scoped> // 样式 </style>