From a6578489fa9238156c2f5614cacc6ce193a54780 Mon Sep 17 00:00:00 2001
From: gaoluyang <gaoluyang@rengu.cc>
Date: 星期二, 24 九月 2024 15:27:03 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
src/components/tool/file-preview.vue | 214 +++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 214 insertions(+), 0 deletions(-)
diff --git a/src/components/tool/file-preview.vue b/src/components/tool/file-preview.vue
new file mode 100644
index 0000000..6b4d9a8
--- /dev/null
+++ b/src/components/tool/file-preview.vue
@@ -0,0 +1,214 @@
+<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 v-if="csvList.length==0">CSV 鏂囦欢鏃犳硶鐩存帴棰勮锛岃涓嬭浇鏌ョ湅銆�</p>
+ <a :href="fileUrl" v-if="csvList.length==0">涓嬭浇鏂囦欢</a>
+ <el-tabs type="border-card" v-if="csvList.length>0" tab-position="bottom">
+ <el-tab-pane :label="item.sheetName" v-for="(item,index) in csvList" :key="index">
+ <el-table :data="item.tableData" height="75vh">
+ <el-table-column :label="m.label" :prop="m.prop" v-for="(m,i) in item.column" :key="i" min-width="120px" show-overflow-tooltip>
+ <template slot-scope="scope" slot="header">
+ <div>
+ <el-tooltip :content="m.label" placement="top">
+ <div class="oneLine">
+ <span>{{m.label}}</span>
+ </div>
+ </el-tooltip>
+ </div>
+ </template>
+ </el-table-column>
+ </el-table>
+ </el-tab-pane>
+ </el-tabs>
+ </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'
+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鍊煎氨鏄嵆灏嗘覆鏌撳埌椤甸潰涓婄殑鍐呭
+ },
+ csvList:[],//csv鏂囦欢鏁版嵁
+ }
+ },
+ 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 => {
+ let arr = res.data
+ arr = arr.map(m=>{
+ let obj = {
+ sheetName:m.sheetName,
+ tableData:[],
+ column:[]
+ }
+ obj.tableData = this.formatCSVToTable(m.content.replaceAll('null',' '))
+ for (let item in obj.tableData[0]) {
+ obj.column.push({
+ label: item,
+ prop: item,
+ })
+ }
+ return obj
+ })
+ this.csvList = arr
+ console.log(4444,this.csvList)
+ }).catch( err => {
+ console.log(err)
+ })
+ },
+ formatCSVToTable(str){
+ const result = [];
+ const jsonObj = str.split("\n");
+ let arrHeader = [];
+ for (const i in jsonObj) {
+ if (typeof jsonObj[i] === 'string' && jsonObj[i].length > 0) {
+ const row = `${jsonObj[i]}`;
+ if (row.trim().length > 0) {
+ const kv = jsonObj[i].split(',');
+ if (i == 0) {
+ // 鑾峰彇column琛ㄥご
+ arrHeader = kv;
+ } else {
+ const obj = {};
+ for (let index = 0; index < arrHeader.length; index++) {
+ // 缁勮琛ㄦ牸鏁版嵁
+ const name = String(arrHeader[index]);
+ if (!arrHeader[index]) continue
+ if (!obj[name]) {
+ try {
+ if (kv[index]) {
+ obj[name] = String(kv[index]);
+ } else {
+ obj[name] = '';
+ }
+ } catch (err) {
+ obj[name] = '';
+ }
+ }
+ }
+ result.push(obj);
+ }
+ }
+ }
+ }
+ return result
+ },
+ }
+}
+</script>
+
+<style scoped>
+img {
+ max-width: 100%;
+}
+
+.oneLine {
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+}
+</style>
--
Gitblit v1.9.3