vue在浏览器局部预览world

最新推荐文章于 2024-12-20 14:48:29 发布

原创最新推荐文章于 2024-12-20 14:48:29 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #javascript #vue.js

本文介绍了一种使用docx-preview库实现Word文档(docx格式)在线预览的方法，包括在线地址文件预览及本地文件预览两种场景，并提供了详细的Vue示例代码。

1.引入下载

npm i docx-preview@0.1.4
npm i jszip

2.预览在线地址文件

<template>
  <div class="home">
    <div ref="file"></div>
  </div>
</template>

<script>
import axios from "axios";
const docx = require("docx-preview");
window.JSZip = require("jszip");
export default {
  mounted() {
    axios({
      method: "get",
      responseType: "blob", // 设置响应文件格式
      url: "/docx",
    }).then(({ data }) => {
      docx.renderAsync(data, this.$refs.file); // 渲染到页面预览
    });
  },
};
</script>

3.预览本地文件

<template>
  <div class="outbox">
    <div class="my-demo">我的文件预览demo</div>
    <div class="my-component" ref="preview">
      <input type="file" @change="preview" ref="file" />
    </div>
  </div>
</template>
<script>
window.JSZip = require("jszip");
const docx = require("docx-preview"); // npm i docx-preview@0.1.4
export default {
  methods: {
    preview(e) {
      docx.renderAsync(this.$refs.file.files[0], this.$refs.preview); // 渲染到页面预览
    },
  },
};
</script>
<style lang="less" scoped>
.outbox {
  display: flex;
}
.my-demo {
  font-size: 100px;
  width: 400px;
  background: #ccc;
  margin-right: 20px;
}
.my-component {
  width: 100%;
  height: 90vh;
  overflow: scroll;
  border: 1px solid #000;
}
</style>

4.最后效果
在这里插入图片描述