|

10精币
<script>
// 获取 DOM 元素
const fileInput = document.getElementById("fileInput");
const fileInfo = document.getElementById("fileInfo");
const container = document.getElementById("container");
// 监听文件上传
fileInput.addEventListener("change", (e) => {
const file = e.target.files[0];
if (!file) return;
// 检查文件类型
if (!file.name.endsWith(".docx")) {
container.innerHTML = `
<p class="error">请上传 .docx 格式的文件!</p>
`;
fileInfo.textContent = "";
return;
}
// 显示文件信息
fileInfo.textContent = `已选择: ${file.name} (${(file.size / 1024).toFixed(2)} KB)`;
container.innerHTML = "<p>加载中...</p>";
// 渲染文档
renderDocx(file);
});
// 渲染函数
function renderDocx(docBlob) {
// 检查依赖是否加载成功
if (typeof JSZip === 'undefined' || typeof docx === 'undefined') {
container.innerHTML = `
<p class="error">依赖加载失败!请检查 JSZip 或 docx-preview 是否正确引入。</p>
`;
return;
}
// 渲染文档
docx.renderAsync(docBlob, container)
.then(() => console.log("docx: 渲染完成"))
.catch((err) => {
container.innerHTML = `
<p class="error">渲染失败:${err.message}</p>
<p>可能原因:</p>
<ul>
<li>文件损坏或不是有效的 .docx 格式</li>
<li>浏览器不支持某些 API(请使用 Chrome/Firefox/Edge)</li>
</ul>
`;
console.error("docx 渲染错误:", err);
});
}
</script>
上面是js代码,下面是JS文件,网站是这样的
JS文件.zip
(47.1 KB, 下载次数: 3)
|
回答提醒:如果本帖被关闭无法回复,您有更好的答案帮助楼主解决,请发表至 源码区 可获得加分喔。 友情提醒:本版被采纳的主题可在 申请荣誉值 页面申请荣誉值,获得 1点 荣誉值,荣誉值可兑换荣誉会员、终身vip用户组。 快捷通道:申请荣誉值 →
|