当前位置：首页 > news >正文

前端使用 preview 插件预览docx文件

news 2025/6/6 5:30:51

前言

一引入插件

建议下载至本地，静态引入，核心的文件已打包（前端使用 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("下载完成");};
}