精华内容
下载资源
问答
  • vue导出

    2020-02-17 20:58:44
    首先说说导出的思路: 导出分为两种情况: get请求 post请求 post请求又分为两种情况: 后端返回流文件 后端返回数据 get请求: exportEvent(){ let timeSlot = this.form.timeSlot; let serviceName = this....

    首先说说导出的思路:
    导出分为两种情况:

    1. get请求
    2. post请求

    post请求又分为两种情况:

    1. 后端返回流文件
    2. 后端返回数据

    get请求:

    exportEvent(){
      let timeSlot = this.form.timeSlot;
      let serviceName = this.form.serviceName;
      //测试环境
      //let url = `http://192.168.30.14:8888/add/v1/test/export?timeSlot=${timeSlot}&serviceId=${serviceId}`;
      //自动获取环境的地址
      let url = `${process.env.VUE_APP_BASE_API}/test/export??timeSlot=${timeSlot}&serviceName=${serviceName}`;
      var $a = document.createElement('a');
      $a.setAttribute("href", url);
      $a.setAttribute("download", "");
    
      //兼容火狐
      //a.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true, view: window}));
      var evObj = document.createEvent('MouseEvents');
      evObj.initMouseEvent( 'click', true, true, window, 0, 0, 0, 0, 0, false, false, true, false, 0, null);
      $a.dispatchEvent(evObj);
    
      //导出功能兼容FireFox的代码
      var explorer = window.navigator.userAgent;
      if (explorer.indexOf("Firefox") >= 0) {
        //alert('Firefox');
        var downloadLink = document.createElement("a");
        downloadLink.href = url;
        //downloadLink.download = '统计.xls';
        document.body.appendChild(downloadLink);
        downloadLink.click();
        document.body.removeChild(downloadLink);
      }
    }
    

    post请求:
    1.后端返回json数据,前端自己做下载

    exportTxt(this.bid).then(res => {
      this.exportRaw("result.txt", JSON.stringify(res));
    });
    
    
    //导出文件
    exportRaw(name, data) {
      var urlObject = window.URL || window.webkitURL || window;
      var export_blob = new Blob([data]);
      var save_link = document.createElementNS(
        "http://www.w3.org/1999/xhtml",
        "a"
      );
      save_link.href = urlObject.createObjectURL(export_blob);
      save_link.download = name;
      this.fakeClick(save_link);
    }
    

    2.后端返回流文件,此时前端需要解析

    exportExcel: function(form) {
         return axios({ // 用axios发送post请求
             method: ‘post‘,
             url: ‘/serviceTime/exportData‘, // 请求地址
             data: form, // 参数
             responseType: ‘blob‘, // 表明返回服务器返回的数据类型
             headers: {
                 ‘Content-Type‘: ‘application/json‘
             }
         })
     }
    
    const params = {
        test: ‘111
    }
    exportExcel(params).then(res => { // 处理返回的文件流
        const blob = new Blob([res]);
        const fileName = ‘统计.xlsx‘;
        const elink = document.createElement(‘a‘);
        elink.download = fileName;
        elink.style.display = ‘none‘;
        elink.href = URL.createObjectURL(blob);
        document.body.appendChild(elink);
        elink.click();
        URL.revokeObjectURL(elink.href); // 释放URL 对象
        document.body.removeChild(elink);
    })
    
    展开全文
  • vue导出Excel

    2021-04-02 16:17:32
    vue导出Excel表格全局函数(简洁明了) vue导出excel全局函数(简洁明了) 将导出到Excel功能封装成一个公用js函数,供其他vue页面复用。 1.安装Excel插件 npm install --save xlsx file-saver 2.编写公用js函数 ...

    vue导出Excel表格全局函数(简洁明了)

    vue导出excel全局函数(简洁明了)

    将导出到Excel功能封装成一个公用js函数,供其他vue页面复用。

    1.安装Excel插件

    npm install --save xlsx file-saver
    

    2.编写公用js函数

    htmlToExcel.js 代码如下:

    import FileSaver from 'file-saver';
    import XLSX from 'xlsx';
    export default {
        // 导出Excel表格
        exportExcel(name, tableName) { //name表示生成excel的文件名     tableName表示表格的id
            var sel = XLSX.utils.table_to_book(document.querySelector(tableName))
            var selIn = XLSX.write(sel, { bookType: 'xlsx', bookSST: true, type: 'array' })
            try {
                FileSaver.saveAs(new Blob([selIn], { type: 'application/octet-stream' }), name)
            } catch (e) { if (typeof console !== 'undefined') console.log(e, selIn) }
            return selIn
        }
    }
    

    3.在main.js中引入全局函数

    //全局导出excel
    import htmlToExcel from './assets/js/htmlToExcel'
    Vue.prototype.htmlToExcels = htmlToExcel;
    

    4.具体vue文件里调用

    <el-table :data="tableData" border style="width: 100%" id="vcfResult">
        <el-table-column prop="geneName" label="基因名" width="180"></el-table-column>
        <el-table-column prop="chromosomeName" label="染色体名" width="180"></el-table-column>
        <el-table-column prop="StartingPoint" label="起点" width="180"></el-table-column>
        <el-table-column prop="End" label="终点" width="180"></el-table-column>
      </el-table>
     <el-button @click="exportEXCEL()">导出EXCEL</el-button>
       methods: {
    	    exportEXCEL() {
     		 this.htmlToExcels.exportExcel("vcf查询结果"+".xlsx", "#vcfResult");
    
        }
      },
    

    方法简单明了 具体导出word,pdf见博客详情

    展开全文
  • vue导出word文档

    2021-04-28 18:42:47
  • vue导出Excel表的js文件

    2020-12-28 15:33:02
    vue导出Excel表的js文件
  • vue导出excel.zip

    2020-04-20 15:07:38
    vue导出excel 所需下载的两个js文件:Blob.js、Export2Excel.js 将上面两个js文件放在vendor目录中 在项目目录下的build下的 webpack.base/conf.js这个webpack的配置文件中的 resolve的alias中加入: 'vendor':path....
  • 主要介绍了Springboot vue导出功能实现代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • vue导出数据

    2020-09-04 09:28:57
    vue导出数据 <el-button @click="download" >下载表格</el-button> download(){ const axios = require("axios"); var datas = sessionStorage.getItem("data"); axios .post(...

    vue导出数据

      <el-button @click="download" >下载表格</el-button>
    
    
      download(){
            const axios = require("axios");
          var datas = sessionStorage.getItem("data");
          axios
            .post("http://192.168.2.239/api_jsonrpc.php", {
              jsonrpc: "2.0",
              method: "host.get",
              params: {
                output: ["hostid", "host"],
                // limit:this.rows,
                // page:this.page,
                // parmas:page,
                selectInterfaces: ["interfaceid", "ip"],
              },
              id: 2,
              auth: datas,
            })
              .then(res => {
                let url=window.URL.createObjectURL(new Blob([res]))
                let link =document.createElement("a")
                link.style.display="none"
                link.href=url
                link.setAttribute('download',"数据中心.xls")
                document.body.appendChild(link)
                link.click()
    })
            .catch(function (error) {
              console.log(error);
            });
          }
    
    展开全文
  • VUE导出Excel文件.rar

    2020-06-02 15:15:08
    VUE导出Excel文件,两种方法,方法二带样式:文字居中,自动换行,列宽设置,单元格合并,冻结表头等。 https://www.cnblogs.com/yinxingen/p/11052184.html
  • vue导出pdf文件

    2020-11-19 11:04:16
    vue导出pdf文件 简单记录一次vue导出pdf文件 1、下载包: npm install html2canvas npm install jspdf 2、编写js import html2Canvas from ‘html2canvas’ import JsPDF from ‘jspdf’ data() { return { // 填入...
  • vue导出excel表格Blob,Export2Excel
  • Vue 导出功能

    万次阅读 2017-12-01 10:46:19
    vue 导出excel表功能1.需要安装三个依赖:npm install -S file-saver xlsx npm install -D script-loader2.项目中新建一个文件夹:(vendor—名字任取) 里面放置两个文件Blob.js和 Export2Excel.js。 下载点击...
  • Vue导出excel必备js文件

    2018-02-03 20:27:49
    blob与Export2Excell.这两个文件是Vue导出excel必备js文件
  • vue导出pdf文档

    2021-04-01 15:54:07
    vue导出pdf文档 安装 npm install html2canvas --save npm install jspdf --save 导入 import html2canvas from 'html2canvas'; import JsPDF from 'jspdf' 或者在全局main.js全局引入 import ...
  • vue导出表格数据

    2021-03-16 10:51:35
    vue导出表格数据 1.下载插件 npm install xlsx --save npm install file-saver --save 2.引用插件 import XLSX from 'xlsx' import FileSaver from 'file-saver' HTML <el-button @click="exportData" style=...
  • vue 导出 excel文件

    2020-08-21 11:14:57
    vue 导出excel文件 import { downloadBinary } from '@/utils/index' import axios from 'axios' // 导出文件xls export function downloadBinary(data, fileName="table.xls") { let blob = data; const reader ...
  • 主要介绍了vue 导出文件,携带请求头token操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要介绍了vue导出html、word和pdf的实现方法,文中完成了三种文件的导出但是还有很多种方法,小编就不给大家一一列举了,需要的朋友可以参考下
  • 主要介绍了Vue导出页面为PDF格式的实现思路,其实思路也很简单,就是将页面转换成图片格式.然后通过图片的base64码.生成PDF..感兴趣的朋友跟随脚本之家小编一起看看吧
  • 本篇主要介绍了Vue导出json数据到Excel电子表格的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue导出Word(包含echart)纯小白一步步填坑去学vue导出Word导入安装包创建模板echart图片处理功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你...
  • Vue 导出PDF文件终极解决方案 关于 Vue 导出 Echarts 统计图为 pdf 格式,网上许多作者给出了解决方案,但是都不能解决一些根本问题,
  • vue导出excel功能实现

    千次阅读 2019-07-04 11:44:07
    vue导出excel功能实现第一步安装依赖包第二步在项目中assets创建一个新的文件夹js用于存放Blob和Export2Excel两个js文件第三步在你那个组件中使用写事件方法Export2Excel.js文件Blob.js文件 第一步安装依赖包 cnpm ...
  • Vue 导出表格为Excel

    2020-08-03 19:02:05
    Vue 导出表格为Excel 1、首先需要准备两个插件: npm install -S file-saver xlsx npm install -D script-loader 2、然后再准备3个js文件,我已经写好,可直接使用: 链接:https://share.weiyun.com/PGWH4fJF ...
  • springBoot+Vue导出Excel

    2020-10-15 14:51:29
    springBoot+Vue导出Excel 后端下载依赖包: <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi</artifactId> <version>4.1.2</version> </...
  • Vue导出页面为PDF格式

    千次阅读 2018-04-11 18:01:22
    转自Vue导出页面为PDF格式
  • vue 导出excel表格实践

    2019-03-29 16:38:49
    vue导出Excel,依赖于如下两个插件 cnpm install --save xlsx file-saver cnpm install -D script-loader 插件安装后:需要建立一个vendor文件夹,有如下两个js 使用,书写导出方法 expor...
  • vue导出数据至Excel表

    2019-10-14 13:52:00
    使用vue导出表格数据至Excel表格中,自定义导出的excel表格数据 1.安装,导入 先安装script-loader,xlsx,file-saver;然后将主要的js导出文件加入 npm i script-loader -S npm i xlsx -S npm i file-saver -S ...
  • vue 导出和上传 Excel 表格 借助的是 xlsx-style 插件 安装 npm install xlsx-style --save 引入 var XLSX = require("xlsx"); // 不支持 import 引入 Excel文件上传 本地读取文件 function read(file) { ...
  • vue导出(下载)Excel模板 代码 导出按钮 代码片. // 导出按钮 <el-button type="primary" size="small" @click="this.downloadMemberTemplate">模板下载</el-button> js 代码片. async ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,710
精华内容 2,684
关键字:

vue导出

vue 订阅