vue 实现在线预览docx文件
docx-preview纯前端插件, 只能够实现docx后缀的文件,doc文件打不开。
1.npm i docx-preview
2.<div class="docWrap" >
<!-- 预览文件的地方(用于渲染) -->
<div id="bodyContainer"></div>
</div>
3.import { renderAsync } from "docx-preview";
4.
const fetchwordUrl = async (keycode) => {
const blob = await Api.DesignInfor.ShowloadProjsImportTemplate(keycode);//请求后端API返回blob数据类型
let bodyContainer = document.getElementById("bodyContainer");
renderAsync(
blob, // Blob | ArrayBuffer | Uint8Array, 可以是 JSZip.loadAsync 支持的任何类型
bodyContainer, // HTMLElement 渲染文档内容的元素,
null, // HTMLElement, 用于呈现文档样式、数字、字体的元素。如果为 null,则将使用 bodyContainer。
).then(res => {
console.log("res---->", res)
})
}
5.去灰边
:deep(.docx-wrapper) {
background-color: #fff;//设置灰边
}