excel 和word导入导出、预览

颜雪雨
240 阅读1分钟

excel

image-20230906085258376.png

image-20230906085422884.png

$ npm i xlsx @vue-office/excel vue-demi @vue/composition-api

input选择文件预览

<template>
  <div>
    <button>创建</button>
    <input type="file" @change="changeFile" />
    <div v-html="excelHtml"></div>
  </div>
</template>

<script>
import vueOfficeExcel from "@vue-office/excel"; //导入的是一个组件，需要注册
import "@vue-office/excel/lib/index.css"; //必须安装vue-demi @vue/composition-api,npm i @vue-office/excel vue-demi @vue/composition-api
import { read, writeFile, utils } from "xlsx";
export default {
  components: {
    vueOfficeExcel,
  },
  data() {
    return {
      excelHtml: "",
    };
  },
  methods: {
    changeFile(e) {
      let _file = e.target.files[0];
      _file.arrayBuffer().then((res) => {
        //arrayBuffer方法（返回一个Promise对象），Blod对象自带，Blod对象包括file对象，
        const wb = read(res); //res是一个arrayBuffer对象，read()会把它转换为book对象
        const sheet1 = wb.Sheets.Sheet1; //获取对应的表格
        const _data = utils.sheet_to_json(sheet1); //转换为数据
        const _html = utils.sheet_to_html(sheet1); //转换为html
        this.excelHtml = _html;
      });
    },
  },
};
</script>

后端请求过来的数据用表格预览

<template>
  <div>
    <button @click="loadExcel">请求</button>
    <div v-html="excelHtml"></div>
  </div>
</template>

<script>
import vueOfficeExcel from "@vue-office/excel"; //导入的是一个组件，需要注册
import "@vue-office/excel/lib/index.css"; //必须安装vue-demi @vue/composition-api,npm i @vue-office/excel vue-demi @vue/composition-api
import { read, writeFile, utils } from "xlsx";
export default {
  components: {
    vueOfficeExcel,
  },
  data() {
    return {
      excelHtml: "",
    };
  },
  methods: {
    loadExcel() {
        //一定要指定响应类型,xxx换成请求路径
      axios.get("xxx",{responseType:"blob"}).then(res=>{
         res.data.arrayBuffer().then((res) => {
        //arrayBuffer方法（返回一个Promise对象），Blod对象自带，Blod对象包括file对象，
        const wb = read(res); //res是一个arrayBuffer对象，read()会把它转换为book对象
        const sheet1 = wb.Sheets.Sheet1; //获取对应的表格
        const _data = utils.sheet_to_json(sheet1); //转换为数据
        const _html = utils.sheet_to_html(sheet1); //转换为html
        this.excelHtml = _html;
      });
      })
     
    },
  },
};
</script>

vue-office/excel预览

<template>
  <div>
    //1. 如果是public文件下的表格文件,src可以直接写文件名，一定要给高度  2. base64--dataURL
    <vue-office-excel
      v-if="excelSrc"
      :src="excelSrc"
      style="height: 500px"
    ></vue-office-excel>
    <input type="file" @change="changeFile" />
  </div>
</template>

<script>
import vueOfficeExcel from "@vue-office/excel"; //导入的是一个组件，需要注册
import "@vue-office/excel/lib/index.css"; //必须安装vue-demi @vue/composition-api,npm i @vue-office/excel vue-demi @vue/composition-api
import { read, writeFile, utils } from "xlsx";
export default {
  components: {
    vueOfficeExcel,
  },
  data() {
    return {
      excelSrc: "",
    };
  },
  methods: {
    changeFile(e) {
      const _file = e.target.files[0];  //获取表格
      const fr = new FileReader();  //创建一个FileReader对象，专门用来把文件这些变成想要的形式的对象
      fr.readAsDataURL(_file); //转换为base64
      fr.onload = (e) => {  //读取完以后
        this.excelSrc = e.target.result; //获取的src路径给到data中的数据
      };
    },
  },
};
</script>

image-20230906092250210.png

数据转换为表格，自动下载下来

<template>
  <div>
    <button @click="createExcel">创建</button>
  </div>
</template>

<script>
import axios from "axios";
import vueOfficeExcel from "@vue-office/excel"; //导入的是一个组件，需要注册
import "@vue-office/excel/lib/index.css"; //必须安装vue-demi @vue/composition-api,npm i @vue-office/excel vue-demi @vue/composition-api
import { read, writeFile, utils } from "xlsx";
export default {
  components: {
    vueOfficeExcel,
  },
  data() {
    return {
      excelHtml: "",
      excelSrc: "",
    };
  },
  methods: {
    createExcel() {
      let _data = [
        { name: "小小", id: 100, score: 88 },
        { name: "小溜", id: 101, score: 90 },
        { name: "小雅", id: 102, score: 99 },
      ];
      const ws = utils.json_to_sheet(_data); //生成一个sheet对象,
      const wb = utils.book_new(); //创建一个空的book对象
      utils.book_append_sheet(wb, ws, "sheet1"); //把sheet对象加到book对象上，加在表格文件的哪一个里面，如sheet1,sheet2
      writeFile(wb, "1.xlsx"); //写成文件，命名为1.xlsx
    },
  },
};
</script>

image-20230906113253099.png

下载结果 image-20230906113833935.png

表格下载到本地

<template>
  <div class="app-container">
    <button @click="createExcel">创建</button>
    <table ref="tableData">
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
      </tr>
      <tr>
        <td>小笑</td>
        <td>18</td>
        <td>女</td>
      </tr>
      <tr>
        <td>小曾</td>
        <td>20</td>
        <td>女</td>
      </tr>
      <tr>
        <td>小林</td>
        <td>22</td>
        <td>男</td>
      </tr>
    </table>
  </div>
</template>

<script>
import axios from "axios";
import vueOfficeExcel from "@vue-office/excel"; //导入的是一个组件，需要注册
import "@vue-office/excel/lib/index.css"; //必须安装vue-demi @vue/composition-api,npm i @vue-office/excel vue-demi @vue/composition-api
import { read, writeFile, utils } from "xlsx";
export default {
  components: {
    vueOfficeExcel,
  },
  data() {
    return {
      excelHtml: "",
      excelSrc: "",
    };
  },
  methods: {
    createExcel() {
      let _data = this.$refs.tableData;
      const ws = utils.table_to_sheet(_data); //生成一个sheet对象,
      const wb = utils.book_new(); //创建一个空的book对象
      utils.book_append_sheet(wb, ws, "sheet1"); //把sheet对象加到book对象上，加在表格文件的哪一个里面，如sheet1,sheet2
      writeFile(wb, "2.xlsx"); //写成文件，命名为1.xlsx
     // const wb2 = utils.table_to_book(_data); //可以直接转换为book对象
      //writeFile(wb2, "2.xlsx"); //写成文件，命名为1.xlsx
    },
  },
};
</script>

下载结果

image-20230906120134530.png

word

image-20230906092440220.png

$ npm i xlsx @vue-office/docx vue-demi @vue/composition-api

@vue-office/docx预览

<template>
  <div class="app-container">
    <vue-office-docx
      v-if="wordSrc"
      :src="wordSrc"
      style="height: 500px"
    ></vue-office-docx>
    <input type="file" @change="changeFile" />
  </div>
</template>

<script>
import vueOfficeDocx from "@vue-office/docx"; //导入的是一个组件，需要注册
import "@vue-office/docx/lib/index.css"; //必须安装vue-demi @vue/composition-api,npm i @vue-office/docx vue-demi @vue/composition-api
import { read, writeFile, utils } from "xlsx";
export default {
  components: {
    vueOfficeDocx,
  },
  data() {
    return {
      wordSrc: "",
    };
  },
  methods: {
    changeFile(e) {
      const _file = e.target.files[0]; //获取表格
      const fr = new FileReader(); //创建一个FileReader对象，专门用来把文件这些变成想要的形式的对象
      fr.readAsDataURL(_file); //转换为base64
      fr.onload = (e) => {
        //读取完以后
        this.wordSrc = e.target.result; //获取的src路径给到data中的数据
      };
    },
  },
};
</script>

docx-preview预览

$ npm i docx-preview

<template>
  <div class="app-container">
    <input type="file" @change="changeFile" />
    <div ref="docx"></div>
  </div>
</template>

<script>
import axios from "axios";
import { renderAsync } from "docx-preview";
import { read, writeFile, utils } from "xlsx";
export default {
  data() {
    return {
      wordSrc: "",
    };
  },
  methods: {
    changeFile(e) {
      const _file = e.target.files[0]; //获取表格
      renderAsync(_file, this.$refs.docx); //renderAsync可以接收Blod、arrayBuffer 第二个参数渲染的dom
    },
  },
};
</script>

word模板写入

word模板

image-20230906142519900.png

$ npm i pizzip docxtemplater file-save

image-20230906142641718.png change方法里面内容 image-20230906142820204.png

结果为

image-20230906142853377.png

**注：图片来源于哔哩哔哩“三十的前端课”的《前端玩转excel,word操作指南》，链接【前端玩转excel,word操作指南】 www.bilibili.com/video/BV1ko… 如有侵权，联系删除 **

avatar
文章
阅读
粉丝