React实现在线预览word报告/本地选择报告预览
标题使用的核心技术点是docx-preview,读取到文件的File对象,用File去做文件展示,这里是才用将文件转base64字符串存储到localStorage中
在线预览word报告且包含word样式
- 下载需要使用的min.js文件进项目的public目录中(上zip已包含以下pulib内的js/css文件)
2.在public文件目录下新建html,命名为docpreview.html
3.在html中引入public下的资源
4.创建dom去展示对应的docx文件
5.创建一个基于Web的文档查看器,用于查看和预览Microsoft Word文档。
1.获取当前文档(currentDocument):通过document.querySelector(‘#document-container’)获取一个用于显示文档内容的HTML元素。
2.设置docx选项:使用Object.assign()方法将docx.defaultOptions与一个包含debug和experimental属性值的对象进行合并。
3.获取加载按钮(loadButton):通过document.querySelector(‘#loadButton’)获取一个用于加载文档的按钮。
4.定义renderDocx函数:一个异步函数,用于渲染Word文档。它接受一个文件参数(file),将其转换为Blob对象,然后使用docx.renderAsync()方法将其渲染到指定的容器中。同时,它还调用renderThumbnails()函数来生成文档的缩略图。
5.处理加载文档按钮的点击事件:当用户点击加载按钮时,调用renderDocx()函数并传入当前文档
6.读取本地存储的文件base64并展示
7.触发预览按钮的事件
//预览报告
function previewReportRequest() {
setsubmitLoading(true)
asyncActionCreators.previewReport({ id: ID }).then((response) => {
setsubmitLoading(false)
if (response?.data?.code === 0) {
localStorage.setItem('base64String', response?.data?.data)
//存好之后,跳转到预览页面
const htmlFilePath = `${window.location.origin}/docpreview.html`
openHtmlFileInNewTab(htmlFilePath)
} else {
message.warning(response.data.msg || '获取报告失败')
}
})
}
const openHtmlFileInNewTab = (url) => {
const anchor = document.createElement('a')
anchor.href = url
anchor.target = '_blank'
anchor.rel = 'noopener noreferrer'
anchor.click()
}
本地选择文件后预览需做以下改动
1.设一个input选取文件
2.添加文件选择方法
const handleLocalFilePreview = (event) => {
const file = event.target.files[0]
const reader = new FileReader()
// 将 Blob 数据编码为 Base64 字符串
reader.onload = (event) => {
const base64String = event.target.result
localStorage.setItem('base64String', base64String)
}
reader.readAsDataURL(file)
}
3.预览按钮的事件 openHtmlFileInNewTab同在线预览
const docxPreview = () => {
const htmlFilePath = `${window.location.origin}/docpreview.html`
openHtmlFileInNewTab(htmlFilePath)
}
4.html文件需要改变方法