vue里使用docx-preview预览docx文件

简介: vue里使用docx-preview预览docx文件

文档跟demo

Docx 渲染库:https://github.com/VolodymyrBaydalka/docxjs#readme

demo例子



安装依赖

npm i docx-preview -S

539e15e3da9d4f1fb892782f4db8aec4.png

使用 API

renderAsync(
    document: Blob | ArrayBuffer | Uint8Array, // could be any type that supported by JSZip.loadAsync
    bodyContainer: HTMLElement, //element to render document content,
    styleContainer: HTMLElement, //element to render document styles, numbeings, fonts. If null, bodyContainer will be used.
    options: {
        className: string = "docx", //class name/prefix for default and document style classes
        inWrapper: boolean = true, //enables rendering of wrapper around document content
        ignoreWidth: boolean = false, //disables rendering width of page
        ignoreHeight: boolean = false, //disables rendering height of page
        ignoreFonts: boolean = false, //disables fonts rendering
        breakPages: boolean = true, //enables page breaking on page breaks
        ignoreLastRenderedPageBreak: boolean = true, //disables page breaking on lastRenderedPageBreak elements
        experimental: boolean = false, //enables experimental features (tab stops calculation)
        trimXmlDeclaration: boolean = true, //if true, xml declaration will be removed from xml documents before parsing
        useBase64URL: boolean = false, //if true, images, fonts, etc. will be converted to base 64 URL, otherwise URL.createObjectURL is used
        useMathMLPolyfill: boolean = false, //includes MathML polyfills for chrome, edge, etc.
        showChanges: false, //enables experimental rendering of document changes (inserions/deletions)
        debug: boolean = false, //enables additional logging
    }
): Promise<any>



编写测试demo

<template>
    <div class="docx-preview-wrap">
        <h1>kaimo test docx-preview</h1>
        <h4>
            <input type="file" id="file" accept=".docx"/>
            <button @click="handlePreview">预览</button>
        </h4>
        <div id="bodyContainer"></div>
    </div>
</template>
<script>
import { defaultOptions, renderAsync } from "docx-preview";
console.log(defaultOptions);
export default {
    name: 'DocxPreview',
    data () {
        return {
            docxOptions: {
                className: "kaimo-docx-666", // string:默认和文档样式类的类名/前缀
                inWrapper:  true, // boolean:启用围绕文档内容的包装器渲染
                ignoreWidth: false, // boolean:禁用页面的渲染宽度
                ignoreHeight: false, // boolean:禁止渲染页面高度
                ignoreFonts: false, // boolean:禁用字体渲染
                breakPages: true, // boolean:在分页符上启用分页
                ignoreLastRenderedPageBreak: true, // boolean:在 lastRenderedPageBreak 元素上禁用分页
                experimental: false, // boolean:启用实验功能(制表符停止计算)
                trimXmlDeclaration: true, // boolean:如果为true,解析前会从​​ xml 文档中移除 xml 声明
                useBase64URL: false, // boolean:如果为true,图片、字体等会转为base 64 URL,否则使用URL.createObjectURL
                useMathMLPolyfill: false, // boolean:包括用于 chrome、edge 等的 MathML polyfill。
                showChanges: false, // boolean:启用文档更改的实验性渲染(插入/删除)
                debug: false, // boolean:启用额外的日志记录
            }
        };
    },
    methods: {
        handlePreview() {
            let file = document.getElementById("file").files[0];
            console.log(file);
            // 将file转为buffer
            let fr = new FileReader();
            fr.readAsArrayBuffer(file);
            fr.addEventListener("loadend",(e) => {
                console.log("loadend---->", e)
                let buffer = e.target.result;
                this.docxRender(buffer);
            },false);
        },
        // 渲染docx
        docxRender(buffer) {
            let bodyContainer = document.getElementById("bodyContainer");
            renderAsync(
                buffer, // Blob | ArrayBuffer | Uint8Array, 可以是 JSZip.loadAsync 支持的任何类型
                bodyContainer, // HTMLElement 渲染文档内容的元素,
                null, // HTMLElement, 用于呈现文档样式、数字、字体的元素。如果为 null,则将使用 bodyContainer。
                this.docxOptions // 配置
            ).then(res => {
                console.log("res---->", res)
            })
        }
    },
};
</script>



测试

启动服务之后我们选择一个 docx 文件


c0badf15f7e94ded8d2eaee6b60a9855.png

然后点击预览,效果如下:

ef6966b11eac4d6cbf7663a32506b83e.png




目录
相关文章
|
1月前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中,兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线,大型项目建议使用Pinia等状态管理工具,确保数据流清晰可控,避免内存泄漏。
207 2
|
4月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
642 0
|
4月前
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能
|
3月前
|
JavaScript 安全
在 Vue 中,如何在回调函数中正确使用 this?
在 Vue 中,如何在回调函数中正确使用 this?
141 0
|
3月前
|
人工智能 JSON JavaScript
VTJ.PRO 首发 MasterGo 设计智能识别引擎,秒级生成 Vue 代码
VTJ.PRO发布「AI MasterGo设计稿识别引擎」,成为全球首个支持解析MasterGo原生JSON文件并自动生成Vue组件的AI工具。通过双引擎架构,实现设计到代码全流程自动化,效率提升300%,助力企业降本增效,引领“设计即生产”新时代。
299 1
|
4月前
|
JavaScript 前端开发 开发者
Vue 自定义进度条组件封装及使用方法详解
这是一篇关于自定义进度条组件的使用指南和开发文档。文章详细介绍了如何在Vue项目中引入、注册并使用该组件,包括基础与高级示例。组件支持分段配置(如颜色、文本)、动画效果及超出进度提示等功能。同时提供了完整的代码实现,支持全局注册,并提出了优化建议,如主题支持、响应式设计等,帮助开发者更灵活地集成和定制进度条组件。资源链接已提供,适合前端开发者参考学习。
403 17
|
4月前
|
JavaScript 前端开发 UED
Vue 表情包输入组件实现代码及详细开发流程解析
这是一篇关于 Vue 表情包输入组件的使用方法与封装指南的文章。通过安装依赖、全局注册和局部使用,可以快速集成表情包功能到 Vue 项目中。文章还详细介绍了组件的封装实现、高级配置(如自定义表情列表、主题定制、动画效果和懒加载)以及完整集成示例。开发者可根据需求扩展功能,例如 GIF 搜索或自定义表情上传,提升用户体验。资源链接提供进一步学习材料。
228 1
|
JavaScript 索引
VUE文件的创建
第一步创建完VUE 项目之后 可以根据自己的需求 创建自己的文件目录(下图是我的文件目录,当然每个人的创建目录的风格也是不同的所以不做严格的规范) 模块文生成    components文件夹下创建  模块文件名字.
840 0
|
6月前
|
JavaScript
vue实现任务周期cron表达式选择组件
vue实现任务周期cron表达式选择组件
860 4
|
5月前
|
JavaScript 数据可视化 前端开发
基于 Vue 与 D3 的可拖拽拓扑图技术方案及应用案例解析
本文介绍了基于Vue和D3实现可拖拽拓扑图的技术方案与应用实例。通过Vue构建用户界面和交互逻辑,结合D3强大的数据可视化能力,实现了力导向布局、节点拖拽、交互事件等功能。文章详细讲解了数据模型设计、拖拽功能实现、组件封装及高级扩展(如节点类型定制、连接样式优化等),并提供了性能优化方案以应对大数据量场景。最终,展示了基础网络拓扑、实时更新拓扑等应用实例,为开发者提供了一套完整的实现思路和实践经验。
621 77

热门文章

最新文章