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. MySQL死锁及解决方案

    一.MySQL锁类型 1. MySQL常用存储引擎的锁机制 MyISAM和MEMORY采用表级锁(table-level locking) BDB采用页面锁(page-level locking)或表 ...

  2. 基于springcloud gateway + nacos实现灰度发布（reactive版）

    什么是灰度发布? 灰度发布(又名金丝雀发布)是指在黑与白之间,能够平滑过渡的一种发布方式.在其上可以进行A/B testing,即让一部分用户继续用产品特性A,一部分用户开始用产品特性B,如果用户对B ...

  3. 权限系统设计(0):权限系统设计基本概念改需-MAC/RBAC引子

    此篇主要对权限系统设计所涉的一些专业术语重点梳理.从我们windows的文件系统 自主访问控制 到基于角色访问控制. 权限设计基本术语 对后面会用到的词汇做一个简要说明 什么是权限(许可) 权限(Pr ...

  4. zabbix 磁盘分区监控

    系统环境 Zabbix 版本:3.4 操作系统版本:centos7.4 监控分区 / ./boot ./home   先创建监控项的模板 点击创建监控项 名称随意填写,键值的话因为我们监控车的是磁盘剩 ...

  5. 基于EntityFramework 6 Code First实现动态建库，分库，数据库自动迁移

    一.前言 公司原本有一个"xx系统",ORM使用EntityFramework,Code First模式.该系统是针对某个客户企业的,现要求该系统支持多个企业使用,但是又不能给每个 ...

  6. Zookeeper实现服务注册/发现

    what that? Zookeeper在分布式开发中使用频繁,但许多框架都对其进行了封装,初学者可能无法较好的理解其工作原理,该文章演示了使用Zookeeper实现服务注册,服务发现的简单demo, ...

  7. 03 . Prometheus监控容器和HTTP探针应用

    Eeporter是什么及来源? 是什么? 广义上讲所有可以向Prometheus提供监控样本数据的程序都可以被称为一个Exporter.而Exporter的一个实例称为target,如下所示,Prom ...

  8. 一篇文章教会你用Python抓取抖音app热点数据

    今天给大家分享一篇简单的安卓app数据分析及抓取方法.以抖音为例,我们想要抓取抖音的热点榜数据. 要知道,这个数据是没有网页版的,只能从手机端下手. 首先我们要安装charles抓包APP数据,它是一 ...

  9. hadoop知识整理（4）之zookeeper

    一.介绍 一个分布式协调服务框架: 一个精简的文件系统,每个节点大小最好不大于1MB: 众多hadoop组件依赖于此,比如hdfs,kafka,hbase,storm等: 旨在,分布式应用中,提供一个 ...

  10. scws中文分词安装和使用

    一.下载源码 wget http://www.xunsearch.com/scws/down/scws-1.2.3.tar.bz2 tar xvjf scws-1.2.3.tar.bz2 二.执行配置 ...