kn-file-viewer
Version:
A file preview component for Vue.js
41 lines (38 loc) • 1.56 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Preview Page</title>
<!-- 引入 mammoth.js -->
<script src="https://unpkg.com/mammoth@1.4.10/mammoth.browser.min.js"></script>
</head>
<body>
<div id="preview"></div>
<script>
window.addEventListener('message', (event) => {
if (event.data instanceof Blob) {
console.log('接收到 Blob 对象:', event.data);
// 创建一个 FileReader 来读取 Blob 数据
const reader = new FileReader();
reader.onload = function (e) {
const arrayBuffer = e.target.result;
// 使用 mammoth.js 转换 DOCX 文件为 HTML
mammoth.convertToHtml({ arrayBuffer: arrayBuffer })
.then(result => {
const html = result.value;
const messages = result.messages;
console.log('转换消息:', messages);
// 将转换后的 HTML 插入到页面中
document.getElementById('preview').innerHTML = html;
})
.catch(error => {
console.error('转换 DOCX 文件时出错:', error);
});
};
reader.readAsArrayBuffer(event.data);
}
});
</script>
</body>
</html>