纯前端导出 wordexcel表格

首先导出这些文件一个word/excel模板是必须的，表格还好说直接在需要的页面中找出相应字段组成表格头list 即可如下：

设置导出表格的表头：

表头设置格式为列名：源数据属性名。

此外引入vue-json-excel （npm install vue-json-excel -S ）注册downloadExcel组件

代码：

  <download-excelclass="export-btn1":data="outdata"   :fields="jsonFields"type="xls"header="报名列表"name="报名列表.xls">批量导出</download-excel>
//outdata 为需导出的源数据

导出表格就ok了似不似很简单QAQ

word导出：

此处word导出需引入以下四个包：


npm install --save jszip-utils
npm install --save docxtemplater
npm install --save file-saver
npm install --save jszip@2.6.0
npm install --save open-docxtemplater-image-module

模板放在public中：

模板填写规则（数据源中属性名加个大括号，若有数组需遍历: {#数组名}为起 {/数组名}为止另外图片:{%image}）：

代码：

      <el-buttonstyle="float: right; padding: 3px 0"type="text"@click="ExportWord()">导出word</el-button>.....import JSZipUtils from 'jszip-utils'
import docxtemplater from 'docxtemplater'
import { saveAs } from 'file-saver'
import JSZip from 'jszip'......ExportWord () {// word导出var ImageModule = require('open-docxtemplater-image-module');let _this = this;// 读取并获得模板文件的二进制内容JSZipUtils.getBinaryContent('1.docx', function (error, content) {// 1.docx是模板。我们在导出的时候，会根据此模板来导出对应的数据// 抛出异常if (error) {throw error}// 图片处理let opts = {}opts.centered = true;  // 图片居中，在word模板中定义方式为{%%image}opts.fileType = "docx";opts.getImage = function (chartId) {return _this.base64DataURLToArrayBuffer(chartId);}opts.getSize = function () {return [100, 120]}let imageModule = new ImageModule(opts);// 创建一个JSZip实例，内容为模板的内容const zip = new JSZip(content)// 创建并加载docxtemplater实例对象let doc = new docxtemplater();doc.attachModule(imageModule);doc.loadZip(zip);// 设置模板变量的值doc.setData({// ..._this.form, //这里是上面form表单的内容..._this.outdata,image: 'data:image/png;base64,' + _this.imgBase64})try {// 用模板变量的值替换所有模板变量doc.render()} catch (error) {// 抛出异常const e = {message: error.message,name: error.name,stack: error.stack,properties: error.properties}console.log(JSON.stringify({error: e}))throw error}// 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）const out = doc.getZip().generate({type: 'blob',mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'})// 将目标文件对象保存为目标类型的文件，并命名saveAs(out, '报名文档.docx')})},

此刻导出word也OK了，我这里导出word中还要有图片这里也一块贴出来了：

base64DataURLToArrayBuffer (dataURL) { //word导出图片有关const base64Regex = /^data:image\/(png|jpg|svg|svg\+xml);base64,/;if (!base64Regex.test(dataURL)) {return false;}const stringBase64 = dataURL.replace(base64Regex, "");let binaryString;if (typeof window !== "undefined") {binaryString = window.atob(stringBase64);} else {binaryString = new Buffer(stringBase64, "base64").toString("binary");}const len = binaryString.length;const bytes = new Uint8Array(len);for (let i = 0; i < len; i++) {const ascii = binaryString.charCodeAt(i);bytes[i] = ascii;}return bytes.buffer;},

纯前端导出 wordexcel表格相关推荐

VUE纯前端导出excel表格功能《转载》
插件:使用vue-json-excel插件实现Vue纯前端导出简单的Excel表格功能. 使用方法 1. 安装依赖 npm install vue-json-excel 2. 引入组件 a. 全局引入 ...
vue导出excel加一个进度条_vue纯前端导出excel表格
一.安装依赖 npm install file-saver --save npm install xlsx --save npm install script-loader --save-dev 二. ...
vue element ui 利用xslx导出文档表格功能（纯前端导出下载文档）
目录前言步骤: 1.下载xslx 2.导入xslx 3.template中给个点击事件 4.methods中定义函数实现导出前言本篇文章记录纯前端导出下载文档功能. 若想查看从后端接收文件流, ...
vue3.0 + xlsx 实现纯前端生成excel表格
vue3.0 + xlsx 实现纯前端生成excel表格 1.安装依赖 npm install xlsx --save 2.导入依赖 import * as XLSX from 'xlsx' // V ...
纯前端导出word、pdf、excel、txt、svg文档方法与技巧（附带问题总结）
文章目录导出pdf **实现思路:** **问题总结:** **具体代码** **封装好的导出函数,记得引入js插件** 封装方法一: 封装方法二: 封装方法三: 纯前端导出word文档方法与技巧 ...
html5生成excel,H5纯前端生成Excel表格
H5纯前端生成Excel表格方法如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 var arr = [ 14 { 15 "姓名":"喵喵喵" ...
纯前端实现xls表格下载
纯前端实现xls表格下载 1.createXlsStr:生成xls模板字符串函数 xls字符串,基本不需要变更,我们只需要通过变量控制结果即可 worksheet:xls的文件名(不是下载的文件名!) ...
Vue导出word附表部分横向显示(承接上一篇Vue纯前端导出word)
Vue纯前端导出word直通车 1. 引入js import htmlDocx from "@/utils/html-docx"; 2. page-break-before:alw ...
纯前端导出export，复杂表格表头合并，表头数据部分动态，
需求,这样的页面有多个table,如投标人名单结果那一列,返回的是1就是通过,返回的不是1就是不通过.如资格评审的横表头,评分说明后面的公司即都是数据接口返的,需要处理后才能放在表头这里的.如详细评 ...

纯前端导出 wordexcel表格

纯前端导出 wordexcel表格相关推荐

最新文章

热门文章