vue 预览并下载本地word

懒大王、

已于 2023-03-19 19:56:04 修改

阅读量1.2k

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

于 2022-07-21 17:01:58 首次发布

本文链接：https://blog.csdn.net/qq_43987527/article/details/125916384

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

vue 预览并下载本地word

需要下载 docx-preview

<template>
  <div class="docxPreview">
    <el-row class="el-row-down">
      <el-button @click="downLoadFile" size="small">导出</el-button>
    </el-row>
    <main>
      <div ref="file" style="width: 100%; height: 100%"></div>
    </main>
  </div>
</template>

<script>
const docx = require("docx-preview");
import Axios from "axios";
import _ from "lodash";
export default {
  components: {},
  // 定义属性
  data() {
    return {};
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {},
  // 监控data中的数据变化
  watch: {},

  created() {},

  mounted() {
    this.getPdfCode();
  },
  // 方法集合
  methods: {
    getPdfCode() {
      Axios({
        method: "get",
        responseType: "blob",
        url: "/test1.docx",
      }).then((data) => {
        console.log(data);
        docx.renderAsync(data, this.$refs.file); // 渲染到页面
      });
    },
    downLoadFile: _.debounce(function () {
      window.open("/test1.docx", ["_self"]);
    }, 250),
  },
};
</script>

<style lang="scss" scoped>
.docxPreview {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  .el-row-down {
    background-color: #808080;
    display: flex;
    justify-content: end;
    padding: 10px 20px;
  }
  main {
    flex: 1;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: auto;
  }
}
</style>