vue2+webpack4（babel6）+docx-preview实现word预览功能

Actualee

已于 2024-03-06 14:08:23 修改

阅读量2.5k

点赞数 12

文章标签：前端 word

于 2024-03-06 14:07:00 首次发布

本文链接：https://blog.csdn.net/actualee/article/details/136498967

版权

文章讲述了在前端项目中引入docx-preview插件时，由于使用了Babel6且遇到可选链语法报错的问题。提供了两种解决方案：升级依赖或通过script标签直接引入。同时介绍了插件的使用方法和核心APIrenderAsync和parseAsync的功能。

摘要由CSDN通过智能技术生成

一、通过npm包直接引入

前提：

需要能够识别可选链（.?）语法，因为docx-preview的nodeModules包中文件xxx包含可选链语法，如果构建的前端项目使用的是babel6（看babel-core的版本），则编译过程会报错，不能正常使用docx-preview插件，解决办法见二。

安装插件

npm install docx-preview --save

使用插件

<template>
    <input type="file" id="file" accept=".docx" />
    <h1 style="color: #fff" @click="previewHandler">预览</h1>
    <div id="bodyContainer" class="main-class" />
</template>


<script>
import { defaultOptions, renderAsync } from 'docx-preview';

export default {
    data() {
        return {
            docxOptions: {
                className: 'docx-preview-class', // 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: {
        previewHandler() {
            let file = document.getElementById("file").files[0];
            // 将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");
            docx.renderAsync(
                buffer, // Blob | ArrayBuffer | Uint8Array, 可以是 JSZip.loadAsync 支持的任何类型
                bodyContainer, // HTMLElement 渲染文档内容的元素,
                null, // HTMLElement, 用于呈现文档样式、数字、字体的元素。如果为 null，则将使用 bodyContainer。
                this.docxOptions // 配置
            ).then(res => {
                console.log("res---->", res)
            })
        },
    }
}


</script>

<style lang="less" scoped>
    // bodyContainer样式
    .main-class {
        overflow: hidden;
        width: 100%;
        height: 100%;
    }
    /deep/ .docx-preview-class-wrapper {
        padding: 0 !important;
        width: 100%;
        height: 100%;
        .docx-preview-class {
            overflow: auto;
            min-height: 100% !important;
            height: 100%;
        }
    }
</style>

样式层级

效果：

红框处为滚动条

二、通过script标签引入

// 在index.html中引入jszip、docx
// 必须先引入jszip
<script src='./static/jszip.min.js'></script>
<script src='./static/docx-preview.min.js'></script>

使用方式上与一类似，只是不用通过import的方式引入renderAsync，window中已经存在docx对象，该对象上挂载了docx插件暴露的对象，如下：

// renders document into specified element
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
        renderChanges: false, //enables experimental rendering of document changes (inserions/deletions)
        renderHeaders: true, //enables headers rendering
        renderFooters: true, //enables footers rendering
        renderFootnotes: true, //enables footnotes rendering
        renderEndnotes: true, //enables endnotes rendering
        debug: boolean = false, //enables additional logging
    }): Promise<WordDocument>

/// ==== experimental / internal API ===
// this API could be used to modify document before rendering
// renderAsync = praseAsync + renderDocument

// parse document and return internal document object
praseAsync(
    document: Blob | ArrayBuffer | Uint8Array,
    options: Options
): Promise<WordDocument>

// render internal document object into specified container
renderDocument(
    wordDocument: WordDocument,
    bodyContainer: HTMLElement,
    styleContainer: HTMLElement,
    options: Options
): Promise<void>

在 docx-preview 中，renderAsync 和 parseAsync 是两个异步方法，用于渲染和解析 Word 文档（.docx 文件）。

renderAsync: 这个方法用于将 Word 文档渲染为 HTML 或者图像数据。它接受一个 Word 文档的二进制数据（或者一个 Blob 对象）作为输入，并生成一个 Promise 对象。当 Promise 对象 resolved 时，可以获取到渲染后的 HTML 或者图像数据，并进行后续操作。
parseAsync: 这个方法用于解析 Word 文档的结构，以便你可以在代码中更方便地使用和处理文档内容。它也接受一个 Word 文档的二进制数据（或者一个 Blob 对象）作为输入，并生成一个 Promise 对象。当 Promise 对象 resolved 时，可以获取到解析后的文档结构，通常是一个对象或者一个树状结构，可以包含段落、表格、图像等。你可以根据需求，进一步处理这些解析后的文档结构。

总结来说，renderAsync 用于将 Word 文档渲染为 HTML 或者图像数据，parseAsync 用于解析 Word 文档的结构，以便在代码中对文档内容进行处理和操作。