文件预览/下载（.docx，.xlsx，.pdf，.png，.jpg，.svg，.gif）

文件预览（.docx，.xlsx，.pdf）

一、文件预览问题

1. 判断文件格式

const match = record.fileName.match(/\.([^.]+)$/)[1]
if(match == 'docx'){
   
......
}else if(match == 'pdf'){
   
......
}else if(match == 'xlsx'){
   
......
} else {
   
	message.warning('文件格式不支持预览')
}

2. 判断不同类型文件使用不同插件或方法

docx文件引入插件

import {
    renderAsync } from 'docx-preview'

xlsx文件引入插件

import * as XLSX from 'xlsx'

pdf文件引入插件

使用'./iframe'插件，不需要下载

二、docx文件下载

<div ref="files" style="overflow: auto;height: 900px"></div>

	const match = record.fileName.match(/\.([^.]+)$/)[1]
			if(match == 'docx'){
   
				const blob = new Blob([res.data], {
   
					type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
				})
				const time = setInterval( () => {
   
					renderAsync(blob, files.value, null, {
   
						 className: 'docx', // string：默认和文档样式类的类名/前缀
						 inWrapper: true, // boolean：启用围绕文档内容的包装器渲染
						 ignoreWidth: false, // boolean：禁用页面的渲染宽度
						 ignoreHeight: false, // boolean：禁止渲染页面高度
						 ignoreFonts: false, // boolean：禁用字体渲染
						 breakPages: true, // boolean：在分页符上启用分页
						 ignoreLastRenderedPageBreak: true, // boolean：在 lastRenderedPageBreak 元素上禁用分页
						 experimental: false, // boolean：启用实验功能（制表符停止计算）
						 trimXmlDeclaration: true, // boolean：如果为true，解析前会从 xmlTemplate 文档中移除 xmlTemplate 声明
						 useBase64URL: false, // boolean：如果为true，图片、字体等会转为base 64 URL，否则使用URL.createObjectURL
						 useMathMLPolyfill: false, // boolean：包括用于 chrome、edge 等的 MathML polyfill。
						 showChanges: false, // boolean：启用文档更改的实验性渲染（插入/删除）