You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
114 lines
2.8 KiB
114 lines
2.8 KiB
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 = `<div style="text-align: center; margin-top: 80px">不支持.${type}格式的在线预览，请下载后预览或转换为支持的格式</div>
|
|
<div style="text-align: center">支持docx, xlsx, pptx, pdf, ofd 以及纯文本格式和各种图片格式的在线预览</div>`
|
|
return VueWrapper(target)
|
|
}
|
|
}
|
|
]
|
|
|
|
// 匹配
|
|
export default handlers.reduce((result, { accepts, handler }) => {
|
|
accepts.forEach((type) => (result[type] = handler))
|
|
return result
|
|
}, {})
|