From 658268a7c8e3cef155eb6da9662c06553a27f911 Mon Sep 17 00:00:00 2001 From: fengyuan_yang <1976974459@qq.com> Date: Thu, 22 Jan 2026 15:50:31 +0800 Subject: [PATCH] =?UTF-8?q?2026-01-22=20=E6=96=87=E4=BB=B6=E9=A2=84?= =?UTF-8?q?=E8=A7=88=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/main.js | 2 + src/utils/filePreview.js | 263 ++++++++++++++++++ src/views/modules/qc/FQCResultEntry.vue | 26 +- src/views/modules/qc/IPQCResultEntry.vue | 45 +-- src/views/modules/qc/IQCFileTable.vue | 84 ++---- src/views/modules/qc/IQCResultEntry.vue | 35 +-- src/views/modules/qc/OQCResultEntry.vue | 83 ++---- src/views/modules/qc/QCReportFileTable.vue | 42 +-- src/views/modules/qc/sopListComponent.vue | 41 +-- .../shopOrder/shopOrder/shopNotice.vue | 42 +-- .../yieldReport/com_process_inspection.vue | 26 +- .../yieldReport/com_produce_report_normal.vue | 45 +-- 12 files changed, 389 insertions(+), 345 deletions(-) create mode 100644 src/utils/filePreview.js diff --git a/src/main.js b/src/main.js index 0a3f8de..bd436b4 100644 --- a/src/main.js +++ b/src/main.js @@ -20,6 +20,7 @@ import pdf from 'vue-pdf' import { debounce,throttle} from '@/utils/common.js' import Viewer from 'v-viewer' import 'viewerjs/dist/viewer.css' +import filePreview from '@/utils/filePreview.js' Vue.component('downloadExcel', JsonExcel) Vue.component('pdf', pdf) @@ -40,6 +41,7 @@ Vue.prototype.decimalUtil = decimalUtil // 计算 Vue.prototype.dayjs = dayjs //时间格式化插件 2021-11-02 Vue.prototype.debounce = debounce // 防抖 Vue.prototype.throttle = throttle // 限流 +Vue.prototype.$filePreview = filePreview // 文件预览工具 // 保存整站vuex本地储存初始状态 window.SITE_CONFIG['storeState'] = cloneDeep(store.state) diff --git a/src/utils/filePreview.js b/src/utils/filePreview.js new file mode 100644 index 0000000..5153959 --- /dev/null +++ b/src/utils/filePreview.js @@ -0,0 +1,263 @@ +/** + * 文件预览工具类 + * 支持图片、视频、PDF、TXT、Excel、Word、PPT等格式的预览 + */ +import XLSX from 'xlsx' + +// 文件类型分类 +const FILE_TYPES = { + image: ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'], + video: ['mp4', 'avi', 'mov', 'wmv', 'flv', 'webm'], + pdf: ['pdf'], + txt: ['txt', 'log', 'json', 'xml', 'csv'], + excel: ['xls', 'xlsx'], + word: ['doc', 'docx'], + ppt: ['ppt', 'pptx'] +} + +/** + * 获取文件后缀 + */ +export function getFileSuffix(fileName) { + if (!fileName || !fileName.includes('.')) return '' + return fileName.substring(fileName.lastIndexOf('.') + 1).toLowerCase() +} + +/** + * 获取文件类型 + */ +export function getFileType(fileName) { + const suffix = getFileSuffix(fileName) + for (const [type, extensions] of Object.entries(FILE_TYPES)) { + if (extensions.includes(suffix)) return type + } + return 'unknown' +} + +/** + * 获取MIME类型 + */ +export function getMimeType(suffix) { + const mimeMap = { + // 图片 + jpg: 'image/jpeg', jpeg: 'image/jpeg', png: 'image/png', gif: 'image/gif', bmp: 'image/bmp', webp: 'image/webp', + // 视频 + mp4: 'video/mp4', avi: 'video/x-msvideo', mov: 'video/quicktime', wmv: 'video/x-ms-wmv', flv: 'video/x-flv', webm: 'video/webm', + // 文档 + pdf: 'application/pdf', + txt: 'text/plain', log: 'text/plain', json: 'application/json', xml: 'application/xml', csv: 'text/csv', + // Office + xls: 'application/vnd.ms-excel', + xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', + doc: 'application/msword', + docx: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', + ppt: 'application/vnd.ms-powerpoint', + pptx: 'application/vnd.openxmlformats-officedocument.presentationml.presentation' + } + return mimeMap[suffix] || 'application/octet-stream' +} + +/** + * 将Blob转换为ArrayBuffer + * @param {Blob} blob - Blob对象 + * @returns {Promise} + */ +export function blobToArrayBuffer(blob) { + return new Promise((resolve, reject) => { + const reader = new FileReader() + reader.onload = () => resolve(reader.result) + reader.onerror = () => reject(new Error('Blob转换失败')) + reader.readAsArrayBuffer(blob) + }) +} + +/** + * 预览Excel文件 + * @param {ArrayBuffer} arrayBuffer - 文件数据（ArrayBuffer格式） + * @param {String} fileName - 文件名 + */ +export function previewExcel(arrayBuffer, fileName) { + try { + const workbook = XLSX.read(arrayBuffer, { type: 'array' }) + const sheetName = workbook.SheetNames[0] + const worksheet = workbook.Sheets[sheetName] + const htmlString = XLSX.utils.sheet_to_html(worksheet, { editable: false }) + + // 预先生成所有sheet的HTML + const sheetsHtml = workbook.SheetNames.map(name => { + return XLSX.utils.sheet_to_html(workbook.Sheets[name], { editable: false }) + }) + + // 创建预览窗口 + const previewWindow = window.open('', '_blank') + if (!previewWindow) { + throw new Error('无法打开预览窗口，请检查浏览器是否阻止了弹出窗口') + } + + previewWindow.document.write(` + + + + + Excel预览 - ${fileName} + + + +
+

Excel预览 - ${fileName}

+
+
+ ${workbook.SheetNames.map((name, index) => + `${name}` + ).join('')} +
+
+ ${htmlString} +
+