做網(wǎng)站業(yè)務提成多少it培訓
標題使用的核心技術點是docx-preview，讀取到文件的File對象，用File去做文件展示，這里是才用將文件轉(zhuǎn)base64字符串存儲到localStorage中
在線預覽word報告且包含word樣式
- 下載需要使用的min.js文件進項目的public目錄中（上zip已包含以下pulib內(nèi)的js/css文件）
2.在public文件目錄下新建html，命名為docpreview.html
3.在html中引入public下的資源
<linkhref="./docx-preview/bootstrap.min.css"rel="stylesheet"integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"crossorigin="anonymous"/><scriptsrc="./docx-preview/bootstrap.bundle.min.js"integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"crossorigin="anonymous"></script><script src="./docx-preview/jszip.min.js"></script><script src="./docx-preview/docx-preview.min.js"></script><script src="./docx-preview/thumbnail.example.js"></script><link href="./docx-preview/thumbnail.example.css" rel="stylesheet" /><script crossorigin src="./docx-preview/tiff.js"></script><script src="./docx-preview/tiff-preprocessor.js"></script>
4.創(chuàng)建dom去展示對應的docx文件
<body class="vh-100 d-flex flex-column"><div class="flex-grow-1 d-flex flex-row" style="height: 0"><divid="document-container"class="overflow-auto flex-grow-1 h-100"></div></div></body>
5.創(chuàng)建一個基于Web的文檔查看器，用于查看和預覽Microsoft Word文檔。
1.獲取當前文檔（currentDocument）：通過document.querySelector(‘#document-container’)獲取一個用于顯示文檔內(nèi)容的HTML元素。
2.設置docx選項：使用Object.assign()方法將docx.defaultOptions與一個包含debug和experimental屬性值的對象進行合并。
3.獲取加載按鈕（loadButton）：通過document.querySelector(‘#loadButton’)獲取一個用于加載文檔的按鈕。
4.定義renderDocx函數(shù)：一個異步函數(shù)，用于渲染W(wǎng)ord文檔。它接受一個文件參數(shù)（file），將其轉(zhuǎn)換為Blob對象，然后使用docx.renderAsync()方法將其渲染到指定的容器中。同時，它還調(diào)用renderThumbnails()函數(shù)來生成文檔的縮略圖。
5.處理加載文檔按鈕的點擊事件：當用戶點擊加載按鈕時，調(diào)用renderDocx()函數(shù)并傳入當前文檔
<script>let currentDocument = nullconst docxOptions = Object.assign(docx.defaultOptions, {debug: true,experimental: true})const container = document.querySelector('#document-container')const loadButton = document.querySelector('#loadButton')async function renderDocx(file) {currentDocument = fileif (!currentDocument) returnlet docxBlob = preprocessTiff(currentDocument)let res = await docx.renderAsync(docxBlob, container, null, docxOptions)renderThumbnails(container,document.querySelector('#thumbnails-container'))}</script>6.讀取本地存儲的文件base64并展示
<script>// base64Data是從后端接收到的Base64字符串const base64String = localStorage.getItem('base64String')// 將Base64字符串轉(zhuǎn)換為Blob對象const byteCharacters = atob(base64String)const byteNumbers = new Array(byteCharacters.length)for (let i = 0; i < byteCharacters.length; i++) {byteNumbers[i] = byteCharacters.charCodeAt(i)}const byteArray = new Uint8Array(byteNumbers)const blob = new Blob([byteArray], { type: 'application/octet-stream' })// 將 Blob 對象轉(zhuǎn)換為 File 對象const file = new File([blob], 'example.docx', {type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'})//調(diào)用方法renderDocx(file)</script>
7.觸發(fā)預覽按鈕的事件
//預覽報告function previewReportRequest() {setsubmitLoading(true)asyncActionCreators.previewReport({ id: ID }).then((response) => {setsubmitLoading(false)if (response?.data?.code === 0) {localStorage.setItem('base64String', response?.data?.data)//存好之后，跳轉(zhuǎn)到預覽頁面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 = urlanchor.target = '_blank'anchor.rel = 'noopener noreferrer'anchor.click()}
本地選擇文件后預覽需做以下改動
1.設一個input選取文件
<input type="file" accept=".docx" onChange={handleLocalFilePreview} />
2.添加文件選擇方法
const handleLocalFilePreview = (event) => {const file = event.target.files[0]const reader = new FileReader()// 將 Blob 數(shù)據(jù)編碼為 Base64 字符串reader.onload = (event) => {const base64String = event.target.resultlocalStorage.setItem('base64String', base64String)}reader.readAsDataURL(file)}
3.預覽按鈕的事件 openHtmlFileInNewTab同在線預覽
const docxPreview = () => {const htmlFilePath = `${window.location.origin}/docpreview.html`openHtmlFileInNewTab(htmlFilePath)}
4.html文件需要改變方法
<script>//==========之前的===========//獲取存儲的blob的base64字符串const base64String = localStorage.getItem('base64String')// 將 Base64 字符串解碼為 Blob 對象const byteCharacters = atob(base64String?.split(',')?.[1])const byteNumbers = new Array(byteCharacters.length)for (let i = 0; i < byteCharacters.length; i++) {byteNumbers[i] = byteCharacters.charCodeAt(i)}const byteArray = new Uint8Array(byteNumbers)const blob = new Blob([byteArray])const file = new File([blob], 'example.docx', {type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'})// 將 Blob 對象轉(zhuǎn)換為 File 對象const file = new File([blob], 'example.docx', {type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'})//調(diào)用方法renderDocx(file)</script>