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. FTP服务器上传工具，FTP服务器上传工具下载！

    IIS7服务器管理工具能够作为FTP的客户端,进行FTP的命令操作,可在客户端,下载,安装FTP软件! 同时,它也可以作为VNC的客户端,进行VNC的命令操作!它能够批量连接Windows和Linux ...

  2. 汇编指令：push、pop

    8086CPU出栈入栈都是以字为单位进行的. push ax 由一下两步完成 1.SP=SP-2 2.将ax中的内容送入SS:SP指向的内存单元 pop ax 1.将SS:SP指向的内存单元中的内容送 ...

  3. iOS－Swift版本自定义CStextView的实现

    CSTextView继承自UITextView,并为其增加了placeHolder属性,支持代码和SB方式创建:demo实现了CSTextView的自动排版 效果图 CSTextView地址: htt ...

  4. iOS －实现UIView圆角显示的方法

    添加一个UIView时,默认直角显示有时对于有强迫症的患者还真有点不舒服! eg: 怎么实现UIview的圆角显示呢? 首先包含一个头文件: #import <QuartzCore/Quartz ...

  5. thinkphp5集成GatewayWorker

    Workerman是一款纯PHP开发的开源高性能的PHP socket 服务器框架,而GatewayWorker则是基于Workerman开发的一个长连接框架,支持分布式部署,支持全局广播或者向任意客 ...

  6. SSM-maven 简单整合

    记一次简单的整合了一次SSM框架过程,因为好久不用了在过程中发生了一些问题. 后续我会在继续在此基础上整合其他框架进来. 本次整合用到的框架有: spring & springmvc myba ...

  7. OSI模型各层详解

    1. OSI概述 1.1 模拟器说明 1.1.1 模拟器的作用 搭建实验环境进行测试. 1.1.2 模拟器的类型 PT:一般是学校中使用,命令不完整,且不能抓包 GNS3:思科(CCNA,CCNP), ...

  8. 【论文阅读】Harris角点算法

    #coding=utf-8 from PIL import Image import numpy as np from scipy.ndimage import filters import matp ...

  9. Linux MySQL Proxy 读写分离

    导读 因为读写分离是建立在MySQL集群主从复制的基础上,还不了解的,先看我另一篇博客:点我直达 MySQL-Proxy简介 mysql-proxy是mysql官方提供的mysql中间件服务,上游可接 ...

  10. 01MySQL内核分析-The Skeleton of the Server Code

    摘要 这个官方文档一段对MySQL内核分析的一个向导.是对MySQL一条insert语句写入到MySQL数据库的分析. 但是,对于MySQL 5.7版本来说,基本上都是写入到innodb引擎.但也还是 ...