vue exports, imports excel, files, preview notes

1. Install xlsx

cnpm i xlsx @vue-office/excel vue-demi @vue-office/docx docx-preview --save

2. Use

1. Page table export

//导出excel
    exportExcel(){
      //1、页面table导出
      const tableDom = document.querySelector('#elTable');
      const tableWs = utils.table_to_sheet(tableDom);
      const wb = utils.book_new();
      utils.book_append_sheet(wb, tableWs, "sheet1");
      writeFile(wb, "列表.xlsx");
    
    },

2. Export based on data

 data() {
    return {
      excelHTML:'',
      tableData:[
      {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }
      ]
    }
  },
 methods: {
    //导出excel
    exportExcel(){

      //json数据导出
      const ws = utils.json_to_sheet(this.tableData);
      const wb = utils.book_new();
      utils.book_append_sheet(wb, ws, "sheet1");
      writeFile(wb, "列表.xlsx");
    },
}

3. Select the file to export html or json data

//选择文件
    selectedFile(e){
      console.log(e)
      let _file = e.target.files[0]
      //1、读取为前端html或json
      _file.arrayBuffer().then((res) => {
        // console.log(res,'res')
        const wb = read(res);
        // console.log(wb,'wb')
        const sheet1 = wb.Sheets.sheet1
        // console.log(sheet1,'sheet1')
        const _data = utils.sheet_to_json(sheet1);
        const _html = utils.sheet_to_html(sheet1);
        console.log(_html,'_html')
        console.log(_data,'_data')
        this.excelHTML = _html
      })
    }

 4. Load local excel preview (@vue-office/excel)

 <vueofficeExcel v-if="excelSrc" :src="excelSrc" style="height:500px"></vueofficeExcel>
import vueofficeExcel from "@vue-office/excel";
// "@vue-office/docx" "@vue-office/pdf"
import "@vue-office/excel/lib/index.css"

 components: {
    vueofficeExcel
  },
data() {
    return {
      excelHTML:'',
      excelSrc:"",//静态远程文件地址、本地文件地址或者本地选择返回base64
      tableData:[
      {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }
      ]
    }
  },
 methods: {
//选择文件
    selectedFile(e){
      console.log(e)
      let _file = e.target.files[0]
      const fr = new FileReader();
      fr.readAsDataURL(_file);
      fr.onload = (e) => {
        this.excelSrc = e.target.result;
      }
      
    }
    
}

 5. Word operation (@vue-office/docx=> preview)

<vueofficeDocx v-if="wordPath" :src="wordPath" style="height:500px"></vueofficeDocx>
import vueofficeDocx from "@vue-office/docx";
import "@vue-office/excel/lib/index.css"
 components: {
    vueofficeDocx
  },
data() {
    return {
      wordPath:'',
}},
methods：{
      
    //选择文件
    selectedFile(e){
      console.log(e)
      let _file = e.target.files[0]
      const fr = new FileReader();
      fr.readAsDataURL(_file);
      fr.onload = (e) => {
        console.log(e.target,'word')
        this.wordPath = e.target.result;
      }
      
    }
}

 

 6. Word preview (docx-preview)

<div ref="docxPreview"></div>
import { renderAsync } from "docx-preview"
    //选择文件
    selectedFile(e){
      let _file = e.target.files[0];
      //blob,arrayBuffer
      renderAsync(_file, this.$refs.docxPreview);
      
    }

7. Import the template and generate documents according to the template format.

1. Create a new template.docx with the following style:

2. Install and use pizzip, docxtemplater, file-saver

cnpm i pizzip docxtemplater file-saver --save

import PizZip from 'pizzip'
import Docxtemplater from 'docxtemplater'
import { saveAs } from 'file-saver'

 tableData:[
      {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }
      ],
    //选择文件
    selectedFile(e){
      let data ={
        tableData:this.tableData
      }
      let _file = e.target.files[0];
      _file.arrayBuffer().then((res) => {
        let zip = new PizZip(res);
        const doc = new Docxtemplater(zip);
        doc.setData(data)
        doc.render();
        const out = doc.getZip().generate({
          type: "blob",
          mimeType:
            "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
        })
        saveAs(out, "生成的文档.docx")
      })
      
    }

All codes

<template>
  <div id="app">
    <div class="table_container">
      <el-row>
        <el-button type="primary" @click="exportExcel">xlsx导出</el-button>
        <input type="file" @change="selectedFile" />
      </el-row>
      <el-table
      id="elTable"
      border
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
    <div class="excel-content" v-html="excelHTML"></div>
    <!-- <vueofficeExcel v-if="excelSrc" :src="excelSrc" style="height:500px"></vueofficeExcel>
    <vueofficeDocx v-if="wordPath" :src="wordPath" style="height:500px"></vueofficeDocx> -->
    <div ref="docxPreview"></div>
    </div>
  </div>
</template>

<script>
import { read, writeFile, utils } from "xlsx"
import vueofficeExcel from "@vue-office/excel";
import vueofficeDocx from "@vue-office/docx";
// "@vue-office/docx" "@vue-office/pdf"
import "@vue-office/excel/lib/index.css"
import { renderAsync } from "docx-preview"
import PizZip from 'pizzip'
import Docxtemplater from 'docxtemplater'
import { saveAs } from 'file-saver'
export default {
  name: 'App',
  components: {
    vueofficeExcel,
    vueofficeDocx
  },
  data() {
    return {
      wordPath:'',
      excelHTML:'',
      excelSrc:"",
      tableData:[
      {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }
      ]
    }
  },
  methods: {
    //导出excel
    exportExcel(){
      //1、页面table导出
      // const tableDom = document.querySelector('#elTable');
      // const tableWs = utils.table_to_sheet(tableDom);
      // const wb = utils.book_new();
      // utils.book_append_sheet(wb, tableWs, "sheet1");
      // writeFile(wb, "列表.xlsx");
      //2、json数据导出
      const ws = utils.json_to_sheet(this.tableData);
      const wb = utils.book_new();
      utils.book_append_sheet(wb, ws, "sheet1");
      writeFile(wb, "列表.xlsx");
    },
    //选择文件
    // selectedFile(e){
    //   console.log(e)
    //   let _file = e.target.files[0]
    //   //1、读取为前端html或json
    //   _file.arrayBuffer().then((res) => {
    //     // console.log(res,'res')
    //     const wb = read(res);
    //     // console.log(wb,'wb')
    //     const sheet1 = wb.Sheets.sheet1
    //     // console.log(sheet1,'sheet1')
    //     const _data = utils.sheet_to_json(sheet1);
    //     const _html = utils.sheet_to_html(sheet1);
    //     console.log(_html,'_html')
    //     console.log(_data,'_data')
    //     this.excelHTML = _html
    //   })
    // },
    //选择文件
    // selectedFile(e){
    //   console.log(e)
    //   let _file = e.target.files[0]
    //   const fr = new FileReader();
    //   fr.readAsDataURL(_file);
    //   fr.onload = (e) => {
    //     this.excelSrc = e.target.result;
    //   }
      
    // },
    //选择文件
    selectedFile(e){
      let data ={
        tableData:this.tableData
      }
      let _file = e.target.files[0];
      _file.arrayBuffer().then((res) => {
        let zip = new PizZip(res);
        const doc = new Docxtemplater(zip);
        doc.setData(data)
        doc.render();
        const out = doc.getZip().generate({
          type: "blob",
          mimeType:
            "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
        })
        saveAs(out, "生成的文档.docx")
      })
      
    }
  },
}
</script>

<style lang="scss">
*{
  margin:0;
  padding:0;
  box-sizing: border-box;
}
html,body,#app{
  width: 100vw;
  height: 100vh;
  
}
.table_container{
  width: 600px;
  margin:0 auto;
  .excel-content{
    table{
      width: 100%;
      border-collapse: collapse;
      td {
          border: 1px solid #000;
          
      }
    }
  }
}
</style>

8. Convert any HTML page or form to PDF using the jspdf library

import { jsPDF } from 'jspdf';

const pdfContentEl = document.getElementById('pdf-content');

const doc = new jsPDF();

await doc.html(pdfContentEl.innerHTML).save('test.pdf');

1,self-defined PDF direction

const doc = new jsPDF({ orientation: 'landscape' });

2, Customize PDF units and sizes

const doc = new jsPDF({ orientation: 'l', unit: 'in', format: [4, 2] });

3, Convert HTML form to PDF

jsPDF can also handle HTML elements whose appearance can change dynamically based on user interaction, such as form input.

HTML:

<form id="form">
  <input type="email" name="email" id="email" placeholder="Email" />
  <br />
  <input
    type="password"
    name="password"
    id="password"
    placeholder="Password"
  />
  <br /><br />
  <button type="submit">Submit</button>
</form>
<br />
<button id="save-pdf">Save PDF</button>

JavaScript:

import { jsPDF } from 'jspdf';

const doc = new jsPDF();
const savePdf = document.getElementById('save-pdf');
const formEl = document.getElementById('form');
savePdf.addEventListener('click', async () => {
  await doc.html(formEl).save('test.pdf');
});