github地址：https://github.com/wuzhiaite/vue-samples

1.excel导出

  做过业务系统的知道，进行涉及到excel的导出，列表数据动则几十万，但是也有一部分分组数据，数据量不是很多，但是数据结构比较复杂。所以后台导出的方式就不是很好。

  因此有的时候，当 ==**表格结构比较复杂**== 的时候，我们需要前台页面导出。

下面我们分析一下怎么做：

	// 使用outerHTML属性获取整个table元素的HTML代码（包括<table>标签），然后包装成一个完整的HTML文档，设置charset为urf-8以防止中文乱码

        var html = "<html><head><meta charset='utf-8' /></head><body>" + document.getElementsByTagName("table")[0].outerHTML + "</body></html>";

        // 实例化一个Blob对象，其构造函数的第一个参数是包含文件内容的数组，第二个参数是包含文件类型属性的对象

        var blob = new Blob([html], { type: "application/vnd.ms-excel" });

        var a = document.getElementsByTagName("a")[0];//这里也可以通过指定id进行获取

        // 利用URL.createObjectURL()方法为a元素生成blob URL

        a.href = URL.createObjectURL(blob);

        // 设置文件名

        a.download = "商品清单.xls";

2.结合上面的代码，给出一个完整的实例

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <meta charset="utf-8" />

    <style>

        table {

            border-collapse: collapse;

        }

    </style>

</head>

<body >

<div id="app">

    <!-- 设置border="1"以显示表格框线 -->

    <table border="1">

        <!-- caption元素可以生成表标题，其单元格列跨度为表格的列数 -->

        <caption>商品清单</caption>

        <tr>

            <th rowspan="2">序号</th>

            <th rowspan="2">商品编号</th>

            <th rowspan="2">分类</th>

            <th colspan="3">价格</th>

        </tr>

        <tr>

            <th>国产</th>

            <th>进口</th>

        </tr>

        <tr>

            <td>1</td>

            <td>201111</td>

            <td>手机</td>

            <td>2000</td>

            <td>5000</td>

        </tr>

        <tr>

            <td>2</td>

            <td>2021243</td>

            <td>电脑</td>

            <td>96000</td>

            <td>5000</td>

        </tr>

    </table>

    <a>导出excel</a>

</div>

	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script>

		var app = new Vue({

	el:"#app",

	data:function(){

		return {}

	},

	created(){

		// 使用outerHTML属性获取整个table元素的HTML代码（包括<table>标签），然后包装成一个完整的HTML文档，设置charset为urf-8以防止中文乱码

        var html = "<html><head><meta charset='utf-8' /></head><body>" + document.getElementsByTagName("table")[0].outerHTML + "</body></html>";

        // 实例化一个Blob对象，其构造函数的第一个参数是包含文件内容的数组，第二个参数是包含文件类型属性的对象

        var blob = new Blob([html], { type: "application/vnd.ms-excel" });

        var a = document.getElementsByTagName("a")[0];

        // 利用URL.createObjectURL()方法为a元素生成blob URL

        a.href = URL.createObjectURL(blob);

        // 设置文件名

        a.download = "商品清单.xls";

	},

	methods:{

	}

})

    </script>

</body>

</html>

3.导出的表格样式

以上，就是一个简单的页面导出excel过程；

vue页面原样导出excel表格的更多相关文章

  1. vue 纯前端导出 excel 表格

    在开发后台管理系统的时候,很多地方都要用到导出excel 表格,比如将table中的数据导出到本地,那么实现这种需求往往有两种方案: 一.后端开发一个下载链接,前端将这个链接放到 a 标签的 href ...

  2. vue实现前端导出excel表格

    1.在src目录下创建一个文件(vendor)进入Blob.js和Export2Excel.js 2.npm install -S file-saver 用来生成文件的web应用程序 3.npm in ...

  3. vue用ElementUI导出Excel表格

    import axios from 'axios'; import qs from 'qs'; import { message } from 'element-ui';   export const ...

  4. Vue中导出Excel表格方法

    本文记录一下在Vue中实现导出Excel表格的做法.参考度娘上各篇博客,最后实现功能 Excel表格,我的后端返回的是数据流,然后文件名是放进了content-disposition中,前端进行获取. ...

  5. vue中导出Excel表格

    项目中我们可能会碰到导出Excel文件的需求,一般后台管理系统中居多,将table中展示的数据导出保存到本地.当然我们也可以通过一些处理来修改要导出的数据格式,具体需求具体对待. 1.首先我们需要安装 ...

  6. 在vue中导出excel表格

    初学者学习vue开发,想把前端项目中导出Excel表格,查了众多帖子,踩了很多坑,拿出来与大家分享一下经验. 安装依赖 //npm npm install file-saver -S npm inst ...

  7. vue 导出excel表格

    对于涉及到数据比较多的管理后台导出excel 表格这个需求就非常的常见了 所以? vue 怎么到处excel表格的? 有两种办法 1:请求接口后台直接给你的是excel文件,你需要做的就是怎么接收ex ...

  8. # vue 如何通过前端来导出excel表格

    在做一些简单的demo时,偶尔会遇到导出excel表格.如果请后端帮忙的话 比较浪费时间,那么前端如何导出excel表格,下面就来记录一下之前使用到的案例 一.安装依赖 npm i file-save ...

  9. java中使用jxl导出Excel表格详细通用步骤

    该方法一般接收两个参数,response和要导出的表格内容的list. 一般我们将数据库的数据查询出来在页面进行展示,根据用户需求,可能需要对页面数据进行导出. 此时只要将展示之前查询所得的数据放入s ...

随机推荐

  1. Java实现串的简单处理

    串的处理 在实际的开发工作中,对字符串的处理是最常见的编程任务.本题目即是要求程序对用户输入的串进行处理.具体规则如下: 把每个单词的首字母变为大写. 把数字与字母之间用下划线字符(_)分开,使得更清 ...

  2. PAT 说反话

    给定一句英语,要求你编写程序,将句中所有单词的顺序颠倒输出. 输入格式: 测试输入包含一个测试用例,在一行内给出总长度不超过 80 的字符串.字符串由若干单词和若干空格组成,其中单词是由英文字母(大小 ...

  3. 死啃了String源码之后

    Java源码之String 说在前面: 为什么看源码: 最好的学习的方式就是模仿,接下来才是创造.而源码就是我们最好的模仿对象,因为写源码的人都不是一般的人,所以用心学习源码,也就可能变成牛逼的人.其 ...

  4. 数据源管理 | Kafka集群环境搭建，消息存储机制详解

    本文源码:GitHub·点这里 || GitEE·点这里 一.Kafka集群环境 1.环境版本 版本:kafka2.11,zookeeper3.4 注意:这里zookeeper3.4也是基于集群模式部 ...

  5. x memory pool c语言 内存池

    #ifndef X_MEMORY_H #define X_MEMORY_H #include <stdlib.h> #include <stdio.h> #include &l ...

  6. 小师妹学JavaIO之:MappedByteBuffer多大的文件我都装得下

    目录 简介 虚拟地址空间 详解MappedByteBuffer MapMode MappedByteBuffer的最大值 MappedByteBuffer的使用 MappedByteBuffer要注意 ...

  7. 线性代数的28法则：作为程序员掌握这些API就够用了……

    目录 1. 向量 & 矩阵 1.1. 问: np.ndarray 与 np.matrix 的区别 1.2. 向量空间 2. 算术运算 2.1. 为什么线性代数定义的乘积运算不按照加法的规则(按 ...

  8. [ARC060D] 最良表現

    题目   点这里看题目. 分析   由于 KMP 的失配数组有着天然的找循环节的功能,因此我们不难想到对原串进行两次 KMP ,一正一反.   可以发现如下的规律:   1. 原串无循环节,这个时候 ...

  9. Com训练_1

    初次接触Com大概是2001年,离现在多年了,那时认识比较肤浅,再次接触学习下. //ComPort + D7, 稍后将训练ComPort6 + D10.3.2环境 //MSComm + D7,D10 ...

  10. 安装elasticsearch的坑

    elasticsearch启动报“此时不应有 \Common 原因 Java 环境变量出错 解决 修改 elasticsearch.bat , 添加一句 : SET params='%*' SET J ...