Vue前端预览docx文档

Vue前端预览docx文档

实现效果

vue代码

<el-dialog title="预览" :visible.sync="filePreview">
                <div ref="file">
                </div>
        </el-dialog>

引入依赖文件

官方文档地址

https://www.npmjs.com/package/docx-preview?activeTab=readme

下载docx-preview
npm install docx-preview

或者本地引入
文件下载地址：https://github.com/VolodymyrBaydalka/docxjs#readme


<!--lib uses jszip 这个是docx引用的包-->
<script src="https://unpkg.com/jszip/dist/jszip.min.js"></script>
<script src="docx-preview.min.js"></script>

获取二进制流，并渲染到页面上

axios({
                    method: "get",
                    responseType: "blob", // 因为是流文件，所以要指定blob类型
                    url: row.url, // 自己的服务器，提供的一个word下载文件接口
                }).then(({ data }) => {
                    docx.renderAsync(data, this.$refs.file); // 渲染到页面
                });

原文地址：https://blog.csdn.net/NAN0808/article/details/143015682

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！