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实现第七届蓝桥杯冰雹数

    题目8.冰雹数 题目描述 任意给定一个正整数N, 如果是偶数,执行: N / 2 如果是奇数,执行: N * 3 + 1 生成的新的数字再执行同样的动作,循环往复. 通过观察发现,这个数字会一会儿上升 ...

  2. 关于virgo-tomcat-server-3.6.0.RELEASE服务的启动

    1.先查看程序是否启动,如果已经启动可以执行第3步的操作进行关闭. [user01@ ~]$ # ps -ef|grep java //查看virgo-tomcat-server的java进程是否存在 ...

  3. 3.vue计算属性

    1.计算属性  再vue中如果出现表达式过长或者逻辑比较复杂,这时会导致代码不清晰,臃肿,难以维护所以我们会使用计算属性进行书写  再计算属性中可以放负责的逻辑,可以是函数,表达式等,但最终会返回一个 ...

  4. DedeCms 标签中channelartlist设置属性标签样式的方法

    实现的效果如下: {dede:channelartlist typeid='6' row='3' currentstyle='current'} <li class='{dede:field.c ...

  5. WPF 如何流畅地滚动ScrollViewer 简单实现下

    看了看原生UWP的ScrollViewer,滑动很流畅(例如 开始菜单),但是WPF自带的ScrollViewer滚动十分生硬.. 突发奇想,今天来实现一个流畅滚动的ScrollViewer. 一.目 ...

  6. [转] Git caret(^) and tilde(~)

    点击阅读原文 I spent a little bit of time playing with Git today, specifically the way that the ^ (caret) ...

  7. fastjson对String、JSONObject、JSONArray相互转换

    String——>>>JSONArray String st = "[{name:Tim,age:25,sex:male},{name:Tom,age:28,sex:mal ...

  8. 虚拟机VMware克隆之后网络不可用的解决办法

    现在有两台虚拟机,113是111的克隆,要让113能够使用,需要做下面的修改 5.解决办法5.1.修改克隆后机器(B机器)70-persistent-net.rules文件内容 对克隆后机器(B机器) ...

  9. cn.arxiv.org || https://arxiv.org/xxxx 访问失败

    https://arxiv.org/xxxx 访问失败解决方法问题:原论文网址::https://arxiv.org/xxxx 无法访问 解决办法:原论文网址::https://arxiv.org/+ ...

  10. 代码静态测试（java）

    工欲善其事,必先利其器 环境 jdk1.8 IntelliJ IDEA 1.静态代码检查 1.1工具 阿里代码规范检测工具 安装教程:阿里代码规范检查工具 1.2规范等级 在 Snoar 中对代码规则 ...