精华内容
下载资源
问答
  • Vue项目前端或后台实现导出报表
    2021-12-06 10:05:55

    一、后台导出
            1.1 使用a链接直接下载
            1.2 使用iframe下载
            1.3 axios请求后使用blob下载
            1.4 方法二: 如果项目中封装了axios
            1.4.1使用file-saver
            1.4.2使用a链接 
            1.4.3调用
    二、前台导出
            2.1使用插件——vue-json-excel

    前言
    此篇记录一下导出功能,分为后端导出和前端导出;网上都有很多方法了,特整理记录一下,方便之后查阅;

    一、后台导出

    • 后端导出指的是,后端已经封装好二进制流,前端只需要做的就是请求接口和下载;通常使用在数据量比较大的情况下;
    • 在写其他代码之前一定测试接口是否正常;

    例如接口:http://197.23.46.97:8088/exprotExcel,
    参数:type:'exprot',name:'excel002',get请求,
    直接访问接口路径:http://197.23.46.97:8088/exprotExceltype=exprot&name=excel002会直接下载文档;

    1.1 使用a链接直接下载

    <template>
      <div>
        <!-- 1.1.1 使用a链接无参数直接下载 -->
        <a :href="exportUrl" target="_block">导出</a>
         <!--1.1.2 使用a链接有参数直接下载 -->
        <a :href="exportByhrefUrl" target="_block">导出</a>
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          exportUrl: "http://197.23.46.97:8088/exprotExcel",
          form: {}
        };
      },
      computed: {
        exportByhrefUrl(){
            let url = "http://197.23.46.97:8088/exprotExcel";
            if (this.form.type) url = url + "?type=" + this.form.type;
            if (this.form.name) url = url + "&name=" + this.form.name;
            return url
        }
      },
    </script>

    1.2 使用iframe下载

    <template>
      <div>
        <!-- 1.2 使用iframe下载 -->
        <button @click="exportExcel">导出</button>
        <iframe :src="exportUrl" style="display:none"></iframe>
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          exportUrl: "",
          form: {}
        };
      },
      methods: {
        exportExcel() {
          // 1.不使用代理的情况
          let url = "http://197.23.46.97:8088/exprotExcel";
          // 2.使用vue代理有参数的情况
          let url2 = "/api-proxy/exprotExcel";
          if (this.form.type) url = url + "?type=" + this.form.type;
          if (this.form.name) url = url + "&name=" + this.form.name;
          this.exportUrl = url;
        },
      }
    };
    </script>
    

    1.3 axios请求后使用blob下载

    <template>
      <div>
        <!-- 1.3 使用axios/ajax请求数据后使用blob下载 -->
        <button @click="exportExcelByAxios">导出</button>
      </div>
    </template>
    <script>
    import axios from axios
    export default {
      data() {
        return {
          exportUrl: "",
          form: {}
        };
      },
      methods: {
        exportExcelByAxios() {
          let url = "/api-proxy/exprotExcel";
          axios.get(url, {params:this.form}, { responseType: "blob" }).then(res => {
              const fileName = "测试表格123.xls";
              //   res.data:请求到的二进制数据 
              const blob = new Blob([res.data], { type: "application/vnd.ms-excel" }); //1.创建一个blob
              const link = document.createElement("a"); //2.创建一个a链接
              link.download = fileName; //3.设置名称
              link.style.display = "none"; // 4.默认不显示
              link.href = URL.createObjectURL(blob); // 5.设置a链接href
              document.body.appendChild(link);//6.将a链接dom插入当前html中
              link.click();//7.点击事件
              URL.revokeObjectURL(link.href); //8.释放url对象
              document.body.removeChild(link); //9.移除a链接dom
          });
        }
      }
    };
    </script>
    

    提示:
    这里一定要注意设置:responseType: "blob";
    这种方法原理是使用JS的内置对象Blob,Blob 对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。MDN关于Blob语法和介绍。
    如果你想下载不是excel格式的文件,
    只用修改new Blob([res.data], { type: "application/vnd.ms-excel" })中type类型,
    比如下载word文件:const blob = new Blob([res.data], { type: "application/msword" });
    附: 常见的MIME 类型列表

    1.4 方法二: 如果项目中封装了axios

            1,api.js(封装api的文件)

    import request from '@/utils/request'
    export function exportExcelByAxios(data) {
      return request({
        url: '/api-proxy/exprotExcel',
        method: 'POST',
        data,
        responseType: 'blob',
      })
    }
    

            2,request.js(封装axios的文件)

    import axios from "axios";
    const TIMEOUT = 30000; // 接口超时时间
    
    const instance = axios.create({
      baseURL: process.env.VUE_APP_BASE_API, // 请求的基础链接,在环境变量文件中定义
      timeout: TIMEOUT, // 超时
      withCredentials: true,//携带cookie
      headers: {
        "Content-Type": "application/json;charset=UTF-8"
      }
    });
    /* 在实例已创建后修改请求头内容默认值 */
    instance.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest";
    instance.interceptors.response.use(
      response => {
        let contentType =
          response.headers["content-type"] || response.headers["Content-Type"];
        // 判断后端是否返回的数据流,如果是数据流,则将整个响应返回,因为需要从header中取文件名
        if (contentType.indexOf("application/octet-stream") > -1) {
          return response;
        } else {
          return response.data;
        }
      },
      error => {
        console.error(error);
        return Promise.reject(error);
      }
    );
    
    export default instance;
    
    

    1.4.1使用file-saver

    npm install  file-saver -s //安装命令
    
    import { saveAs } from 'file-saver'
    export function exportBlobToExcel(res, f) {
      const contentDisposition =
        res.headers['content-disposition'] || res.headers['Content-Disposition']
      const filename =
        (contentDisposition && contentDisposition.split('=')[1]) || f || ''
      // 实例化一个blob对象
      const blob = new Blob([res.data], { type: 'text/plain;charset=utf-8' })
      // 将blob保存为excel文件
      saveAs(blob, filename)
    }
    
    

    1.4.2 使用a链接

    export function download(response) {
      const blob = new Blob([response.data], {
        type:
          'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8',
      })
      const contentDisposition =
        response.headers['content-disposition'] ||
        response.headers['Content-Disposition']
      const filename =
        (contentDisposition && contentDisposition.split('=')[1]) || f || ''
      if (!filename) return
      const link = document.createElement('a') //2.创建一个a链接
      link.download = filename //3.设置名称
      link.style.display = 'none' // 4.默认不显示
      link.href = URL.createObjectURL(blob) // 5.设置a链接href
      document.body.appendChild(link) //6.将a链接dom插入当前html中
      link.click() //7.点击事件
      URL.revokeObjectURL(link.href) //8.释放url对象
      document.body.removeChild(link) //9.移除a链接dom
    }
    
    //调用
    <template>
      <div>
        <button @click="exportExcelByAxios">导出</button>
      </div>
    </template>
    <script>
    import {exportBlobToExcel,download} from './export.js'
    import {exportExcelByAxios} from './api.js'
    export default {
      methods: {
        exportExcelByAxios() {
          exportExcelByAxios({data:'参数'}).then(res=>{
          	exportBlobToExcel(res)//使用file-saver
          	 //#or
          	download(res)//使用a 链接
          })
      },
    };
    </script>
    

    二、前台导出
    前台导出指的是:前端直接导出数据,不经过后台处理,在数据量小的情况下,也很方便处理;

    2.1使用插件——vue-json-excel

    npm install vue-json-excel   //安装依赖
    
    import JsonExcel from 'vue-json-excel'       //在全局main.js中导入引用
    Vue.component('downloadExcel', JsonExcel)
    
    <template>
      <div>
        <!-- 2.1前台导出,双向绑定数据 -->
        <download-excel
          :data="tableData"
          :fields="json_fields"
          :name="excelName"
        >
          <button>导出EXCEL</button>
        </download-excel>
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          //报表名称必须加后缀
          excelName:'数据报表.xls',
          //数据列表
          tableData: [
          	{id:01,name:'测试数据1',amountNum:99,amountPrice:500},
          	{id:02,name:'测试数据2',amountNum:30,amountPrice:100},
          ],
          //导出的列的key和名称表头的设置
           json_fields: {
            序号: "id",
            名称: "name",
            数量: "amountNum",
            金额: "amountPrice"
          }
        };
      },
    };
    </script>
    

    更多相关内容
  • 内容索引:.NET源码,管理系统,报表,打印 数据查询报表打印系统SQL版,自定义了一个数据打印及报表控件,先把数据库配置好,VS2008下编译程序即可运行,组件的IIS下运行也可以。
  • 预算报表查询导出操作指南 .pdf
  • QT操作word导出报表

    热门讨论 2014-06-09 11:24:44
    使用Qt导出word报表 可以自己手动添加其他函数,基本上内部可以实现很多了
  • ERP系统如何通过存储过程导出报表数据 ERP系统如何导出报表数据 总所周知,ERP系统本身框架自带有报表导出功能,但是如果数据量如果过多的话(比方说超过1百万数据量的话),会出现导出数据耗时长等现象。本文将采取...

    ERP系统如何通过存储过程导出报表数据

    在这里插入E图片描述ERP系统如何导出报表数据

    总所周知,ERP系统本身框架自带有报表导出功能,但是如果数据量如果过多的话(比方说超过1百万数据量的话),会出现导出数据耗时长等现象。本文将采取另外一整方式即利用存储过程导出数据。

    步骤如下:1.第一步:首先创建存储过程,Java程序里面要调用存储过程,需要建包和包体。
    在这里插入图片描述创建包的SQL语句

    2.第二步:编写调用Java程序。
    在这里插入图片描述Java调用存储过程写法

    3.第三步。创建填写Excel模板。
    在这里插入图片描述填写Excel通用方法

    4.第四步:Excel导出成功。
    在这里插入图片描述数据导出成功

    以上就是ERP导出大量数据的另外一种方式。

    展开全文
  • 但是很多场景都是线上和线下结合,既要方便线上在系统中查看到报表,同时还得能和传统的线下业务无缝贴合,比如把结果导出到文件来流转、电子归档呀之类的,这时就需要报表工具具备强有力的所见即所得的导出本领。...

    用报表工具开发,核心功能是把各种数据源的数据以表格或图表的形式在线上网页端呈现出来。但是很多场景都是线上和线下结合,既要方便线上在系统中查看到报表,同时还得能和传统的线下业务无缝贴合,比如把结果导出到文件来流转、电子归档呀之类的,这时就需要报表工具具备强有力的所见即所得的导出本领。

    当前,对报表工具来说,支持导出基本算是标配功能,除了开源报表工具在支持的文件类型上有限制外,对于商业报表工具来说,常用的文件类型,几乎没什么区别,比如都支持导出 word、excel、pdf、txt 等。

    至于使用的技术细节,这里就不做详细讨论了,像市面上最多的用 java 开发的报表工具,基本都是借助第三方开源的工具包,如 poi 导出 excel、itext 导出 pdf 等。

    需要强调的是,虽然商业报表工具一般都能导出希望的条件,但效果可能差出千万里,不能简单地听厂商宣传说能与不能,还要看好与不好。报表工具模型有传统条带式与新型网格式两种,前者在设计报表的时候就存在位置摆放精度不准,边框间重合、对齐等难搞的问题,结果会导致导出的文件出现失真的情况,或者搞出一大堆碎格子,反正都不是想要的效果;而后者才能充分体现表格的规律性,导出时能保证无失真。

    9219244d4267b2caec5a92b1ab4eacd3.png

    除了基本导出功能外,还会有些个性化需求,比如报表不需要展现,希望直接批量导出多个报表、多个报表导出到一个 excel 文件等。大多数国产老厂商也都提供了丰富的 api,例子一搜一堆,可轻松扩展导出能力。比如下面示例,几行代码解决批量导一个 excel 文件。

    041762633886a193a1959de5b610dfdf.png

    尽管新型网格式设计器对于基本的导出效果都做的挺好了,各产品间也几乎无差异,但对于一些真正特殊格式或要求的报表,也不是谁都能搞好的。

    比如,word 报告式的报表

    8beb7fef503299915c4280d96432c097.png

    图一

    这类报告用报表工具做的话都得是硬画(如富文本),好处在于可以让数据动态变化,图表设计更加灵活,不会因为数据不同,还要重复修改文件。但是有很大的缺点,比如页面展现尽管看着有标题格式等表现,但是导出 word 会发现实际页面上只是标题效果,word 内是正文了,还包括一些换行、排版,做起来麻烦,导出后的效果也无法完全达到预期效果。

    对于这种需求,其实还有更好的解决方案,比如我们可以用报表工具结合一些 api 来搞,像一些固定内容,如标题了、固定描述性的文字了就放在 word 文件内做好,在需要放入表格或图表的位置插入个书签。

    75f0cef42979bc56306ff30e68c79435.png

    通过报表工具提供的 api 把计算后的报表结果插入到对应的书签位置就可以了。

    这么做,避免了硬排版(可以更好布局),方便调整样式,提高报告式报表开发效率的同时,导出的 word 也更符合报告的需求(图一)。详细方案可参考 怎样自动把报表插入到 word 文档中

    再如,产品中可能用到了第三方的展现控件,像开源的 echarts 统计图,图形丰富、展现酷炫,常被集成到报表中使用,但有个麻烦的事儿是没法导出。其中的原因是,报表导出是后台程序实现,而 echarts 需要从浏览器(前端)中截取图形才能导出,如果报表一页呈现,这个还好处理,一旦报表分了多页,echarts 图形也就可能分布到多页内了,而我们是无法从浏览器截取到当前页未展现的 echarts 图的,所以这个就要考察报表工具的功能完善度,方案实际比较清晰,把所有的 echarts 图形拿到,交给后台放到报表对应的位置就行,关键是看报表工具是不是已经解决了。想了解报表工具解决导出 echarts 方案细节的,推荐 如何才能导出和打印 Echarts 图形? 学习了解下。

    从上面的例子可以了解到,尽管宣传上每个报表工具的导出功能上还都挺全面的,基本的导出也支持。但具体到细节及扩展能力,可比较的功夫还是很多的。那我们在选产品的时候,导出基本效果就够用了?还是有些特殊的表样、需要特别的导出效果、导出功能扩展?那就要根据需求,花点时间扣扣细节,比比细节了。

    展开全文
  • 包含的字段为: v.id 任务编号, d.`name` 部门名称, CONCAT(v.assignedTo,'(',u.realname,')')登记人, v.pname 项目, v.tname 任务名称, v.estimate 预计工时, v.consumed 已完成工时, v.`left` 剩余工时, ...
  • 在线报名系统:用于统计报名者各类信息(姓名、邮箱、身份证号、联系地址、报名科目、备注等等); 支持新注册提交、个人信息查看和修改,管理员对全局数据的查看、删除和修改,批量导出xls汇总表; 编码支持gb2312/...
  • 但因应用场景的不同,一些报表在导出过程中,需要携带参数定义文件名,或直接自定义导出文件名,减少操作人员导出数据后还需要进行文件名更改的操作。 针对以上应用场景,我们可以通过自定义按钮,自定义JS事件,在...

    在系统日常运行中,系统默认提供的原样导出,是默认以报表名字为文件名的;但因应用场景的不同,一些报表在导出过程中,需要携带参数定义文件名,或直接自定义导出文件名,减少操作人员导出数据后还需要进行文件名更改的操作。

    针对以上应用场景,我们可以通过自定义按钮,自定义JS事件,在实现报表导出的基础上,进一步自定义导出的文件名。

    前面已经有写过一篇在常规报表中的自定义文件名导出,但是常规报表中的导出在决策报表中是不可行的,无法导出报表块的数据,需要对JS进行适当调整,才能实现决策报表中的报表块原样导出

    1、决策报表-工具栏设计:

    2、javascripts事件编辑:

    在自定义按钮中,自定义JS事件:

    var OPEN_URL="/mmd/madata/view/mrp?mrp=GCZJ%2FCRD%2F71-gczj_dqsq_cljg_qsfx_jsc.mrf&title="+title+"&op=export&format=excel&__filename__="+title+'&msId=' + _g().msId;
    
    window.location=(MR.cjkEncode(OPEN_URL)); 

    3、效果图:

     

    通过以上操作,就可以实现决策报表中进行数据的原样导出,同时导出时的文件名,就会根据系统的传参值或自定义值,自动生成,从而使操作人员不需要对文件名进行二次修改,加快工作效率!

     

    报表导出并自定义文件名:

    常规报表:https://blog.csdn.net/wang1qqqq/article/details/103628542

    决策报表:https://blog.csdn.net/wang1qqqq/article/details/103629568

    展开全文
  • 情景:一个决策报表中有三个参数控件,本报表显示的是总结后的报表块,但是业务方面需要用到另一种形式的报表块,参数面板中添加导出空件,根据此时的参数值进行明细导出。 一开始的思路有点错误。想的是将两个...
  • 用户希望不预览报表直接导出结果,如在系统中点击某个标签或点击按钮,就导出报表,该实例可参考页面集成的自定义导出按钮。 1.2 功能描述 直接预览报表的 URL 后增加&format=导出的格式,通过给 format ...
  • -- poi实现excel导入导出--> <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi</artifactId> <version>3.9</version> </dependency
  • 包含:jxl插件以及源代码示例 jxl是一个韩国人写的java操作excel的工具, 开源世界中,有...但jExcelAPI对中文支持非常好,API是纯Java的, 并不依赖Windows系统,即使运行Linux下,它同样能够正确的处理Excel文件。
  • SAP中报表清单导出的常用方法

    千次阅读 2020-08-07 22:45:19
    企业SAP应用中存在大量的报表清单导出需求,常用方法有多种。梳理如下(个人笔记,供参考): 一、前台事务T-code方式 前台事务T-code方式的优点是基于系统标准功能,用户基本可以自行完成操作。其不足是报表清单...
  • 整个系统下来,起码超过一百张报表需要导出。这个时候如何优雅的实现报表导出,释放生产力就显得很重要了。下面主要给大家分享一下该工具类的使用方法与实现思路。 实现的功能点 对于每个报表都相同的操作,我们很...
  • 我用的安迅报表工具Actuate BIRT Designer,登录系统以后打开任意一个页面,第一次执行报表导出失败,爆出一堆乱码,再次的执行导出就会成功导出,不知道原因,求大神。。。。![执行导出]...
  • 当我们插件开发的过程中,需要使用excel格式导出一些自己的数据,我们可以使用帆软报表内部的excel导出的相关代码,没必要去使用第三方框架来做excel导出。 通过研究帆软内部的excel导出的相关代码,...
  • ERP系统信息化资料:ERP项目_用户操作手册_SD-120验厂验货及报表导出_20181023_V1.0(1).docx
  • 系统主要用于工程监测(基坑监测、隧道监测、建筑物沉降观测等)数据处理,主要功能:1、各类监测数据录入、计算;2、施工工况信息录入汇总;3、巡视记录的录入、巡视报告导出;4、依据已录入的监测数据生成监测...
  • flask导出Excel报表详解

    千次阅读 2020-04-07 08:43:17
    日常开发中,导出数据报表可谓必备技能,后台管理中,很多模块都需要数据报表,现在我们一起来学习一下 flask 如何导出数据报表。 没有实例的讲解很不容易理解,本文我们依然从实际项目来讲解,对 “flask+...
  • U8报表查询、导出、打印

    千次阅读 2020-11-24 09:36:21
    1、打开电子报表-报表编制 2、点击表样 3、如果看不到表样的话,点击上面的视图-报表树 4、根据单位性质选择符合单位的表样树 5、点击打开资产负债表-点击左上角眼镜图标编制,即可查询资产负债表 6、点击左上...
  • 对初学者很有用的自动报表输出样例,值得一看
  • 巡更系统数据导出步骤巡更系统数据导出步骤
  • Java使用POI实现数据导出excel报表

    千次阅读 2018-09-17 11:20:40
    尤其是生产管理或者财务系统中用的非常普遍,因为这些系统经常要做一些报表打印的工作。而数据导出的格式一般是EXCEL或者PDF 。所以今天我们来简单看一下利用Apache POI实现数据库中数据导出exce...
  • 后台管理系统导出Excel表格的方法

    千次阅读 2019-10-12 15:03:01
    //导出Excel公共方法 function excelExport(colums,queryParams,objectName,baseUrl,sysUrl,body,title){ if(colums==null){ return; } var tableParam=new Object(); tableParam.colums=colums; ...
  • java报表项目demo

    2015-03-05 21:24:00
    java图形报表例子希望对大家有帮助,直接加到myeclipse就可以了.
  • 富文本编辑器导出word

    2021-01-14 14:05:49
    系统中富文本编辑器内容导出到word文件(包含图片)
  • 但是在系统中应用 到的大部分可以绘制数据报表的插件或组件,只能做到将一个数据报表 以其他的文件形式(如:图片等)导出出来,无法将多个报表呈现一 个文件中。本篇描述的就是,Vue 2.0 的项目中,遇到类似的...
  • 纯java编写的报表系统,能够快速生成报表,对数据库表数据进行查询导出。整个框架自己搭建,简单易懂,可扩展性强。
  • 做PB很久了,前期主要做工厂里面的ERP系统,后面转做医疗方面的Lis系统,都涉及到很多报表导出到Excel文件,我们系统也有封装好的Excel导出功能,但是对于数据量超过三万多条的,系统就会卡死,这个问题持续了好几年...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 32,707
精华内容 13,082
关键字:

如何在系统导出报表

友情链接: Induction.rar