From 1a7bb722b745a421b12590a363c88684901249c9 Mon Sep 17 00:00:00 2001
From: licp <lichunping@guanfang.com.cn>
Date: 星期二, 24 九月 2024 13:34:16 +0800
Subject: [PATCH] 完成图片、word、excel、pdf文件预览
---
src/components/tool/file-preview.vue | 163 ++++++++++++++++++++++++++++++++++++++++
src/components/do/b1-inspect-order-plan/Inspection.vue | 32 +++++++
src/assets/api/controller.js | 1
3 files changed, 193 insertions(+), 3 deletions(-)
diff --git a/src/assets/api/controller.js b/src/assets/api/controller.js
index a050408..78e0867 100644
--- a/src/assets/api/controller.js
+++ b/src/assets/api/controller.js
@@ -216,6 +216,7 @@
getInsProduct2: "/insOrderPlan/getInsProduct2", // 鏌ョ湅鍘嗗彶鐗堟湰鏈�
scanInsOrderState: "/insOrderPlan/scanInsOrderState", // 鎵爜鎶ユ鎺ュ彛
getInsOrderUserList: "/insOrderPlan/getInsOrderUserList", // 鏌ョ湅妫�楠屽巻鍙插垪琛�
+ preview: "/insOrderPlan/preview", // csv鏂囦欢棰勮
}
const systemLog = {
diff --git a/src/components/do/b1-inspect-order-plan/Inspection.vue b/src/components/do/b1-inspect-order-plan/Inspection.vue
index ae1d2cc..e952bcf 100644
--- a/src/components/do/b1-inspect-order-plan/Inspection.vue
+++ b/src/components/do/b1-inspect-order-plan/Inspection.vue
@@ -717,7 +717,7 @@
}"
v-if="state==1&&fileAdd"
:on-success="handleSuccessUp" :show-file-list="false"
- accept='.jpg,.jpeg,.png,.gif,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf,.zip,.rar,.csv' :headers="headers" :on-change="beforeUpload"
+ accept='.jpg,.jpeg,.png,.gif,.docx,.xls,.xlsx,.pdf,.zip,.rar,.csv' :headers="headers" :on-change="beforeUpload"
style="width: 80px !important;"
:on-error="onError" ref='upload'>
<el-button size="small" type="primary" v-if="state==1">闄勪欢涓婁紶</el-button></el-upload>
@@ -855,6 +855,13 @@
<el-button type="primary" @click="submit0">纭� 瀹�</el-button>
</span>
</el-dialog>
+ <el-dialog
+ title="鏂囦欢棰勮"
+ :visible.sync="lookFileVisible"
+ width="60%" fullscreen>
+ <filePreview v-if="lookFileVisible" :fileUrl="currentFile.url"
+ :currentFile="currentFile" style="max-height: 87vh;overflow-y: auto;"/>
+ </el-dialog>
</div>
</template>
@@ -865,16 +872,19 @@
import excelFunction from '../../../util/excelFountion'
import CircuitParameters1 from './circuit-parameters1.vue'
import CircuitParameters2 from './circuit-parameters2.vue'
+ import filePreview from '../../tool/file-preview.vue'
export default {
props: ['sonLaboratory', 'orderId', 'state','inspectorList','version','orderStateId','isLook','num1','noBack'],
components: {
ValueTable,
Circuit,
CircuitParameters1,
- CircuitParameters2
+ CircuitParameters2,
+ filePreview
},
data() {
return {
+ lookFileVisible:false,//棰勮鏂囦欢
experimentDia:false,
experimentInfo:{
note:'',
@@ -944,6 +954,12 @@
disabFun: (row, index) => {
return this.state!=1
}
+ },
+ {
+ id: '1',
+ font: '棰勮',
+ type: 'text',
+ method: 'lookFile',
}
],
isPage: false,
@@ -1054,7 +1070,8 @@
otherForm:{
temperature:'',
humidity:''
- }
+ },
+ currentFile:{},//褰撳墠鏂囦欢
}
},
// 鐢ㄤ簬涓婁紶鏂囦欢鐨勪俊鎭�
@@ -3596,6 +3613,15 @@
await this.handleChangeSample(this.currentSample)
this.currentNum++
this.tableLoading = false
+ },
+ lookFile(row){
+ this.currentFile = row;
+ if(row.type==1){
+ this.currentFile.url = this.javaApi+'/img/'+row.fileUrl
+ }else{
+ this.currentFile.url = this.javaApi+'/word/'+row.fileUrl
+ }
+ this.lookFileVisible = true
}
}
}
diff --git a/src/components/tool/file-preview.vue b/src/components/tool/file-preview.vue
new file mode 100644
index 0000000..8fa2f24
--- /dev/null
+++ b/src/components/tool/file-preview.vue
@@ -0,0 +1,163 @@
+<template>
+ <div>
+ <div v-if="isImage">
+ <img :src="fileUrl" alt="Image Preview" />
+ </div>
+ <div v-if="isPdf">
+ <object :data="fileUrl" type="application/pdf" width="100%" height="600px">
+ <p>鎮ㄧ殑娴忚鍣ㄤ笉鏀寔 PDF 棰勮銆�<a :href="fileUrl">涓嬭浇 PDF 鏂囦欢</a></p>
+ </object>
+ </div>
+ <div v-if="isDoc">
+ <p v-if="!isDocShow">鏂囨。鏃犳硶鐩存帴棰勮锛岃涓嬭浇鏌ョ湅銆�</p>
+ <a :href="fileUrl" v-if="!isDocShow">涓嬭浇鏂囦欢</a>
+ <vue-office-docx
+ :src="fileUrl"
+ style="height: 100vh;"
+ @rendered="renderedHandler"
+ @error="errorHandler"
+ />
+ </div>
+ <div v-if="isXls">
+ <p v-if="!isDocShow">鏂囨。鏃犳硶鐩存帴棰勮锛岃涓嬭浇鏌ョ湅銆�</p>
+ <a :href="fileUrl" v-if="!isDocShow">涓嬭浇鏂囦欢</a>
+ <vue-office-excel
+ :src="fileUrl"
+ :options="options"
+ style="height: 100vh;"
+ @rendered="renderedHandler"
+ @error="errorHandler"
+ />
+ </div>
+ <div v-if="isZipOrRar">
+ <p>鍘嬬缉鏂囦欢鏃犳硶鐩存帴棰勮锛岃涓嬭浇鏌ョ湅銆�</p>
+ <a :href="fileUrl">涓嬭浇鏂囦欢</a>
+ </div>
+ <div v-if="isCsv">
+ <p>CSV 鏂囦欢鏃犳硶鐩存帴棰勮锛岃涓嬭浇鏌ョ湅銆�</p>
+ <a :href="fileUrl">涓嬭浇鏂囦欢</a>
+ <div id="teacherPaperAnswer"></div>
+ </div>
+ <div v-if="!isSupported">
+ <p>涓嶆敮鎸佺殑鏂囦欢鏍煎紡</p>
+ </div>
+ </div>
+</template>
+
+<script>
+import VueOfficeDocx from '@vue-office/docx'
+//寮曞叆鐩稿叧鏍峰紡
+import '@vue-office/docx/lib/index.css'
+import VueOfficeExcel from '@vue-office/excel'
+//寮曞叆鐩稿叧鏍峰紡
+import '@vue-office/excel/lib/index.css'
+import Papa from 'papaparse';
+import jschardet from 'jschardet'
+export default {
+ components: {
+ VueOfficeDocx,
+ VueOfficeExcel,
+ },
+ props: {
+ fileUrl: {
+ type: String,
+ required: true
+ },
+ currentFile: {
+ type: Object,
+ required: true
+ },
+ },
+ data(){
+ return {
+ isDocShow:true,
+ options:{
+ xls: false, //棰勮xlsx鏂囦欢璁句负false锛涢瑙坸ls鏂囦欢璁句负true
+ minColLength: 0, // excel鏈�灏戞覆鏌撳灏戝垪锛屽鏋滄兂瀹炵幇xlsx鏂囦欢鍐呭鏈夊嚑鍒楋紝灏辨覆鏌撳嚑鍒楋紝鍙互灏嗘鍊艰缃负0.
+ minRowLength: 0, // excel鏈�灏戞覆鏌撳灏戣锛屽鏋滄兂瀹炵幇鏍规嵁xlsx瀹為檯鍑芥暟娓叉煋锛屽彲浠ュ皢姝ゅ�艰缃负0.
+ widthOffset: 10, //濡傛灉娓叉煋鍑烘潵鐨勭粨鏋滄劅瑙夊崟鍏冩牸瀹藉害涓嶅锛屽彲浠ュ湪榛樿娓叉煋鐨勫垪琛ㄥ搴︿笂鍐嶅姞 Npx瀹�
+ heightOffset: 10, //鍦ㄩ粯璁ゆ覆鏌撶殑鍒楄〃楂樺害涓婂啀鍔� Npx楂�
+ beforeTransformData: (workbookData) => {return workbookData}, //搴曞眰閫氳繃exceljs鑾峰彇excel鏂囦欢鍐呭锛岄�氳繃璇ラ挬瀛愬嚱鏁帮紝鍙互瀵硅幏鍙栫殑excel鏂囦欢鍐呭杩涜淇敼锛屾瘮濡傛煇涓崟鍏冩牸鐨勬暟鎹樉绀轰笉姝ｇ‘锛屽彲浠ュ湪姝よ嚜琛屼慨鏀规瘡涓崟鍏冩牸鐨剉alue鍊笺��
+ transformData: (workbookData) => {return workbookData}, //灏嗚幏鍙栧埌鐨別xcel鏁版嵁杩涜澶勭悊涔嬪悗涓旀覆鏌撳埌椤甸潰涔嬪墠锛屽彲閫氳繃transformData瀵瑰嵆灏嗘覆鏌撶殑鏁版嵁鍙婃牱寮忚繘琛屼慨鏀癸紝姝ゆ椂姣忎釜鍗曞厓鏍肩殑text鍊煎氨鏄嵆灏嗘覆鏌撳埌椤甸潰涓婄殑鍐呭
+ },
+ }
+ },
+ computed: {
+ isImage() {
+ return /\.(jpg|jpeg|png|gif)$/i.test(this.fileUrl);
+ },
+ isPdf() {
+ return /\.pdf$/i.test(this.fileUrl);
+ },
+ isDoc() {
+ return /\.(doc|docx)$/i.test(this.fileUrl);
+ },
+ isXls(){
+ return /\.(xls|xlsx)$/i.test(this.fileUrl);
+ },
+ isZipOrRar() {
+ return /\.(zip|rar)$/i.test(this.fileUrl);
+ },
+ isCsv() {
+ let state = /\.csv$/i.test(this.fileUrl)
+ if(state){
+ this.loadCSVData();
+ // this.main()
+ }
+ return state;
+ },
+ isSupported() {
+ return this.isImage || this.isPdf || this.isDoc || this.isZipOrRar || this.isCsv||this.isXls;
+ }
+ },
+ methods:{
+ renderedHandler() {
+ console.log("娓叉煋瀹屾垚")
+ this.isDocShow = true
+ },
+ errorHandler() {
+ console.log("娓叉煋澶辫触")
+ this.isDocShow = false
+ },
+ async loadCSVData() {
+ this.$axios.post(this.$api.insOrderPlan.preview, {
+ id: this.currentFile.id,
+ }).then( res => {
+ console.log(res.data)
+ }).catch( err => {
+ console.log(err)
+ })
+ },
+ async main(){
+ //娓叉煋琛ㄦ牸
+ this.paintingTable(criteriaAnswer,"teacherPaperAnswer"); //鐢╥d瀹氫綅娓叉煋鐩爣
+ },
+ paintingTable(File, location) {
+ $("#" + location + "").empty();
+ let table = '<table class="table table-bordered" style="zoom:0.8";>';
+ for (let j = 0; j < File.length; j++) {
+ if (j == 0) {
+ table += '<thead><tr style="white-space: nowrap;"><th scope="col">#</th>';
+ for (let k in File[j]) {
+ table += '<th scope="col">' + k + '</th>';
+ }
+ table += '</tr></thead><tbody style="white-space: pre;">';
+ }
+ table += '<tr><th scope="row" style="vertical-align: middle;">' + Number(j + 1) + '</th>';
+ for (let k in File[j]) {
+ table += '<td style="vertical-align: middle; padding:0 20px; border: inset;background:#FFFFFF;"><div style="text-align:left;">' + File[j][k] + '</div></td>';
+ }
+ table += '</tr>';
+ }
+ table += '</tbody>';
+ $("#" + location + "").append(table);
+ },
+ }
+}
+</script>
+
+<style scoped>
+img {
+ max-width: 100%;
+}
+</style>
--
Gitblit v1.9.3