import { defaultOptions, renderAsync } from 'docx-preview' import renderPptx from '@/vendors/pptx' import renderSheet from '@/vendors/xlsx' import renderOfdView from '@/vendors/ofd' import renderPdf from '@/vendors/pdf' import renderImage from '@/vendors/image' import renderText from '@/vendors/text' import renderMp4 from '@/vendors/mp4' // 假装构造一个vue的包装,让上层统一处理销毁和替换节点 const VueWrapper = (el) => ({ $el: el, $destroy() { // 什么也不需要 nothing to do } }) const handlers = [ // 使用docxjs支持,目前效果最好的渲染器 { accepts: ['docx'], handler: async(buffer, target) => { console.log(defaultOptions) const docxOptions = Object.assign(defaultOptions, { debug: true, experimental: true }) console.log(target) await renderAsync(buffer, target, null, docxOptions) return VueWrapper(target) } }, // 使用pptx2html,已通过默认值更替 { accepts: ['pptx'], handler: async(buffer, target) => { await renderPptx(buffer, target, null) window.dispatchEvent(new Event('resize')) return VueWrapper(target) } }, // 使用sheetjs + handsontable,无样式 { accepts: ['xlsx'], handler: async(buffer, target) => { return renderSheet(buffer, target) } }, // 使用pdfjs,渲染pdf,效果最好 { accepts: ['pdf'], handler: async(buffer, target) => { return renderPdf(buffer, target) } }, // ofd { accepts: ['ofd'], handler: async(buffer, target) => { return renderOfdView(buffer, target) } }, // 图片过滤器 { accepts: ['gif', 'jpg', 'jpeg', 'bmp', 'tiff', 'tif', 'png', 'svg'], handler: async(buffer, target) => { return renderImage(buffer, target) } }, // 纯文本预览 { accepts: [ 'txt', 'json', 'js', 'css', 'java', 'py', 'html', 'jsx', 'ts', 'tsx', 'xml', 'md', 'log' ], handler: async(buffer, target) => { return renderText(buffer, target) } }, // 视频预览,仅支持MP4 { accepts: ['mp4'], handler: async(buffer, target) => { renderMp4(buffer, target) return VueWrapper(target) } }, // 错误处理 { accepts: ['error'], handler: async(buffer, target, type) => { target.innerHTML = `