前言

??????? 前端使用 preview 插件預覽docx文件

一 引入插件

建議下載至本地，靜態引入，核心的文件已打包（前端使用 preview 插件預覽docx文件），在文章目錄處下載至本地，復制在項目靜態資源處，在使用的地方直接本地靜態資源引入；

<script src="https://unpkg.com/jszip/dist/jszip.min.js"></script>
<script src="https://unpkg.com/docx-preview/dist/docx-preview.min.js"></script>
<!-- 建議下載至本地，靜態引入 -->
<script  src='/js/PreViewDoc/jszip.min.js'></script>
<script  src='/js/PreViewDoc/docx-preview.min.js'></script>

二 JS 處理

var api = {init: function () {var that = this;laydate.render({elem: $('[name=StatisDate]').get(0), type: 'month', value: getLastMonth(), done: function (value, date, endDate) {if (date.year < new Date().getFullYear()) {console.log(new Date().getFullYear());RendergetZone(date.year);} else {GetCurrZone();}}});$('#ReportNam').text(reportNam);form.render();that.event();},event: function () {var that = this;form.on('submit(report_query)', function (input) {// 禁用 "生成" 按鈕const generateButton = $('[lay-submit]'); // 通過lay-submit獲取按鈕generateButton.addClass('layui-btn-disabled').attr('disabled', true); // 禁用按鈕generateButton.html('<i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop">' +'</i> 生成中'); // 修改按鈕內容為 loading 動畫const container = document.getElementById('doc-content'); // 渲染文檔的容器//清空提示信息container.innerHTML = '';$.ajax({url: interface2021.ReportManagement.QueryWorkSimpleReport,method: 'POST',headers: {'Content-Type': 'application/json',},data: JSON.stringify({statisDate: input.field.StatisDate,zoneCode: input.field.ZoneCd,issuingUnit: input.field.IssuingUnit,stageNumber: input.field.StageNumber,}),// xhrFields: {//     responseType: 'blob', // 接收文件流// },success: function (response) {if (response.code === -1) {container.innerHTML = "<p style='color: red;'>文檔請求失敗</p>";relieveDisable(false,generateButton, '生成', response.message);} else {var fileProxyUrl = response.data;fetch(fileProxyUrl).then((response) => response.blob()).then((blob) => {docx.renderAsync(blob, container).then(() => {console.log('文檔渲染成功');//恢復按鈕relieveDisable(true,generateButton, '生成', response.message);// 獲取下載按鈕并設置屬性const downloadButton = document.getElementById('download-btn');downloadButton.style.display = 'inline-block'; // 顯示下載按鈕downloadFile(downloadButton, response.data);}).catch((err) => {console.log('文檔渲染失敗', err);container.innerHTML = "<p style='color: red;'>文檔請求失敗</p>";relieveDisable(false,generateButton, '生成', err.message);});}).catch((error) => {console.log('文件加載失敗:', error);relieveDisable(false,generateButton, '生成', error.message);});}},error: function (xhr, type, errorThrown) {console.log('文檔請求失敗: ', errorThrown);$('#doc-content').html('<p style="color: red;">文檔請求失敗</p>');relieveDisable(false,generateButton, '生成', '生成失敗！');},});});},
}function downloadFile(downloadButton, downloadUrl) {// 啟用 "下載" 按鈕downloadButton.onclick = function () {console.log("開始下載...");const link = document.createElement('a');link.href = downloadUrl;document.body.appendChild(link);link.click();document.body.removeChild(link);console.log("下載完成");};
}