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. 【大厂面试04期】讲讲一条MySQL更新语句是怎么执行的？

    流程图 这是在网上找到的一张流程图,写的比较好,大家可以先看图,然后看详细阅读下面的各个步骤. 执行流程: 1.连接验证及解析 客户端与MySQL Server建立连接,发送语句给MySQL Serv ...

  2. Entity Framework Core遇到的问题汇总

    1.add-migration : 无法将“add-migration”项识别为 cmdlet.函数.脚本文件或可运行程序的名称.请检查名称的拼写,如果包括路径,请确保路径正确,然后再试一次. 使用E ...

  3. 8、react 高阶组件

    1.高阶组件:封装 高阶组件使用得是react得一种模式,增强现有组件得功能 一个高阶组件就是一个函数,这个函数接收得是组件类作为参数得,并且返回得是一个新组件,再返回得新组件中有输入参数组件不具备得 ...

  4. Vue-websocket使用

    Vue中使用websocket 1.介绍:websocket是一个双向通行工具,解决了原来的http单向通信的弊端,可以让服务器主动向客户端推送数据 // 安装客户端的socket npm i soc ...

  5. linux安装QT-Designer两种方法

    1.安装Qt-Creator, Qt-Creator自带了qt-designer 2.安装qt5-default,qttools5-dev-tools

  6. vs2010静态编译qt5.1.0

    本博文参考 http://blog.chinaunix.net/uid-20690340-id-3802197.html 静态库在链接的时候直接写入二进制文件里,这样的好处在于发布的时候无需附带dll ...

  7. Kubernetes-subpath的使用

    一.什么是subpath 为了支持单一个pod多次使用同一个volume而设计,subpath翻译过来是子路径的意思,如果是数据卷挂载在容器,指的是存储卷目录的子路径,如果是配置项configMap/ ...

  8. 当小程序的flex布局遇到button时，justify-content不起作用的原因及解决方案

    当小程序的flex布局遇到button时 发现justify-content不起作用,无论怎么设置都是space-around的效果. 经过排查,发现原因是小程序button中的默认样式中的margi ...

  9. TensorFlow从0到1之TensorFlow实现反向传播算法（21）

    反向传播(BPN)算法是神经网络中研究最多.使用最多的算法之一,它用于将输出层中的误差传播到隐藏层的神经元,然后用于更新权重. 学习 BPN 算法可以分成以下两个过程: 正向传播:输入被馈送到网络,信 ...

  10. （一）TestNG-常用注解参数

    原文:https://www.cnblogs.com/starstarstar/p/11305733.html 注解@Test标签 package com.course.testng; import ...