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

    2020-12-03 18:53:14
    <template> <div class="app-container"> <...txt导出</el-button> </div> </template> export default { data() { return { tableData:[ {id:1,name:'小明'
    <template>
      <div class="app-container">
          <el-button type="primary" @click="onClickDownDaily">txt导出</el-button>
      </div>
    </template>
    export default {
      data() {
        return {
          tableData:[
            {id:1,name:'小明',age:18},
            {id:2,name:'小红',age:10},
            {id:3,name:'晓东',age:33}
          ]
        }
      },
      created() {
      },
      methods: {
        // txt文件导出
        onClickDownDaily() {
          var title = '文件标题'
          var str=''
          this.tableData.forEach(item=>{
            str+='ID:'+item.id+'   '+'名称:'+item.name+'   '+'年龄:'+item.age+'\r\n'
          })
          var allStr = title+'\r\n'+'\r\n'+str
          var export_blob = new Blob([allStr]);
          var save_link = document.createElement("a");
          save_link.href = window.URL.createObjectURL(export_blob);
          save_link.download = '导出'+'.txt';
          this.fakeClick(save_link);
        },
        fakeClick(obj) {
          var ev = document.createEvent("MouseEvents");
          ev.initMouseEvent(
            "click",
            true,
            false,
            window,
            0,
            0,
            0,
            0,
            0,
            false,
            false,
            false,
            false,
            0,
            null
          );
          obj.dispatchEvent(ev);
        }
      }
    }
    
    展开全文
  • vue导出txt文件

    2020-12-11 13:16:21
    el-button size="mini" @click="exportTxt(scope.$index, scope.row)">导出</el-button> // 导出 exportTxt(index,row){ cdkExport({batchId:row.id,status:0}).then(res=>{ const element = ...
    <el-button size="mini" @click="exportTxt(scope.$index, scope.row)">导出</el-button>
    
    // 导出
        exportTxt(index,row){
          cdkExport({batchId:row.id,status:0}).then(res=>{ 
            const element = document.createElement('a')
            element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(res.data.data))  //res.data.data是接口返回的数据
            element.setAttribute('download', res.data.msg)
            element.style.display = 'none'
            element.click()
          })
        },
    
    展开全文
  • 前端vue导出Zip文件

    千次阅读 2019-05-30 19:11:10
    第一步:下载插件 npm install jszip /npm install script-loader / npm install file-saver 第二步:封装js代码 require('script-loader!... //th是头部标题,jsonData是数据,txtName是txt文件名字,zi...

    第一步:下载插件 

    npm install jszip  /npm install script-loader / npm install file-saver

    第二步:封装js代码

    require('script-loader!file-saver');
    import JSZip from 'jszip'
     //th是头部标题,jsonData是数据,txtName是txt文件名字,zipName是压缩包的名字
    export function export_txt_to_zip(th, jsonData, txtName, zipName) {
       const zip = new JSZip()
       const txt_name = txtName || 'file'
       const zip_name = zipName || 'file'
       const data = jsonData
       let txtData = `${th}\r\n`
       data.forEach((row) => {
         let tempStr = ''
         tempStr = row.toString()
         txtData += `${tempStr}\r\n`
       })
       zip.file(`${txt_name}.txt`, txtData)
       zip.generateAsync({
         type: "blob"
       }).then((blob) => {
         saveAs(blob, `${zip_name}.zip`)
       }, (err) => {
         alert('导出失败')
       })
     }

    第三部:调用js进行生成压缩包进行下载

        //触发事件进项调用
        handleDownload() {
           import('@/vendor/Export2Zip').then(zip => {
             const tHeader = ['Id', 'Title', 'Author', 'Readings', 'Date']
             const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
             const list = this.list
             const data = this.formatJson(filterVal, list)
             zip.export_txt_to_zip(tHeader, data, this.filename, this.filename)
           })
         },
         formatJson(filterVal, jsonData) {
           return jsonData.map(v => filterVal.map(j => v[j]))
         }

     

    展开全文
  • 效果 <!DOCTYPE html> <html>...script src="vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"> <button s

    效果

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
    <script src="vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
    	<div id="app">
    	<button size="small" @click="ExportData('hello.txt',message)" type="primary" style="margin:0px 10px 0px 0px">导出</button>
    	</div>
    
    
    	<script type="text/javascript">
    	var app = new Vue({
    		el: '#app',
    		data: {
    			message: 'Hello Vue! 123',
    			name : "Vue"
    		},
    		methods:{
    		  		ExportData(filename,filecontent){
    			  	//定义文件内容,类型必须为Blob 否则createObjectURL会报错
    			  	let content = new Blob([filecontent])	 
    			  	//生成url对象
    			  	let  urlObject = window.URL || window.webkitURL || window	
    			  	let url = urlObject.createObjectURL(content)	
    			  	//生成<a></a>DOM元素
    			  	let el = document.createElement('a')
    			  	//链接赋值
    			  	el.href = url
    			  	el.download =filename
    			  	//必须点击否则不会下载
    			  	el.click()		
    			  	//移除链接释放资源		
    			    urlObject.revokeObjectURL(url)
    			  }
    		}
    	});
    	</script>
    
    </body>
    </html>
    

     

    csv示例

    棚,棚id,智能设备Id,传感器id,传感器名,值,采集时间
    1,2,3,4,5,6,7

     

    展开全文
  • 后端接口返回的文件流: 定义: 此为https.js文件 // Excel文件下载 export function getExcelDownload(url, params) { return request({ url: url, params, headers: { 'Content-Type': 'application/json; ...
  • vue + ant-design-vue导出Excel文件

    千次阅读 2020-10-09 17:18:20
    //点击导出 exportData(){ this.isLoading = true if(!this.startTime || !this.endTime){ this.$message.warning("请选择开始和结束时间") } else { console.log(this.startTime,this.endTime) httpUtil....
  • Vue导出文件流方式导出Excel

    千次阅读 2019-10-28 17:54:24
    1、后端返回文本流如下图: 2、请求方法: getExcel() { const url = ‘URL地址’; this.$http.post(url, this.filter, { responseType: ‘blob’ ...//注意在请求是携带”responseType: ...3、即可导出表格:
  • Excel 导出Excel 的导入导出都是依赖于js-xlsx来实现的。在 js-xlsx的基础上又封装了Export2Excel.js来方便导出数据。使用由于 Export2Excel不仅依赖js-xlsx还依赖file-saver和script-loader。所以你先需要安装如下...
  • 目录 ...2.前端使用axios下载txt文件 二、后端SpringBoot接口 1.跨域配置 import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; i
  • 需求:点击上传txt文件,先读取txt文件中的内容进行展示。 上传使用的是element的upload如下: <el-upload action="/" ref="upload" accept=".txt" :before-upload="beforeUpload" :disabled="this....
  • vue导出

    2020-02-17 20:58:44
    首先说说导出的思路: ...后端返回流文件 后端返回数据 get请求: exportEvent(){ let timeSlot = this.form.timeSlot; let serviceName = this.form.serviceName; //测试环境 //let url = `http:/...
  • vue 导入导出Excel文件

    2021-05-22 14:42:16
    [] data 导出的具体数据 Array / [[]] filename 导出文件名 String / excel-list autoWidth 单元格是否要自适应宽度 Boolean true / false true bookType 导出文件类型 String xlsx, csv, txt, more xlsx 三、excel...
  • vue生成txt文件下载

    千次阅读 2020-02-14 10:58:56
    sequenceDownload(row) { const element = document.createElement('a') element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(row.asemJson)) element.s...
  • 主要介绍了Springboot vue导出功能实现代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • vue(前端)字符串导出.txt文件

    千次阅读 2021-01-28 15:41:31
    首先安装 FileSaver包,npm install file-saver --save 在main.js中引入 import {saveAs} from 'file-saver;' 将字符串转为Blob对象 ...saveAs(str, `导出文件时的名字.txt`); 注意这里要手动写上文件的后缀名 ...
  • vue结合后台写导出excel文件

    千次阅读 2019-06-25 17:00:41
    vue结合后台写导出excel文件
  • Vue 通过Blob 导出文件

    2021-05-20 16:06:58
    后台返回流文件(返回结果如下图),前端接收返回值,通过Blob下载文件 下载代码: function download (res) { //res是后台返回的数据 let blob = new Blob([res.data], { type: 'application/vnd....
  • Antd Vue 文件导出与导入 StaticMethods.js export let exportRaw = (name, data) => { var urlObject = window.URL || window.webkitURL || window; var export_blob = new Blob([data]); var save_link = ...
  • vue导出excel

    2021-01-26 11:06:15
    workSheet, 'SheetJS') XLSX.writeFile(workBook, '文件名称' + '.xlsx') }, 注意 resultArray 格式 [[], [], []] [ [‘personName’, ‘personAge’, ‘personWeight’], [‘Kalinda’, 23, 55], [‘April’, ‘24...
  • vue中下载文件导出保存到本地

    千次阅读 2021-03-10 10:56:12
    vue中下载文件导出保存到本地 先分析如何下载:先有一个链接地址,然后使用 location.href或window.open()下载到本地 看看返回数据 res.config.url 中是下载链接地址,res.data 中是返回的二进制数据 如何下载 ... ...
  • 具体思路是:后端返回给我json数据,前端根据数据和具体的几项字段去导出excel表格,还有导出多个sheet,多页表格到一个excel表里面,具体思路 根据Export2Excel插件,并修改插件Export2Excel完成导出多页(多个sheet...
  • 原来实现是通过后台生成然后前端请求下载,这样要消耗IO资源,然后看了一下之前项目的导出功能,发现原来Vue+iview可以实现本地数据导出,不过iview自带的方法只能导入CSV格式的文件,然后我是需要导出xlsx格式的文件,...
  • vue项目里导出excel文件(简单使用) 1.安装依赖 cnpm install -S file-saver xlsx cnpm install -D script-loader 2.main.js引入Bolb.js和Export2Excel.js import Blob from './excel/Blob' import Export2Excel ...
  • vue导出excel(多个sheet表)

    千次阅读 2020-08-17 10:27:53
    具体思路是:后端返回给我json数据,前端根据数据和具体的几项字段去导出excel表格,还有导出多个sheet,多页表格到一个excel表里面,具体思路 根据Export2Excel插件,并修改插件Export2Excel完成导出多页(多个sheet...
  • -- $t is vue-i18n global function to translate lang --> <el-input v-model="filename" :placeholder="$t('zip.placeholder')" style="width:300px;" prefix-icon="el-icon-document" /> <el-...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,355
精华内容 542
关键字:

vue导出txt文件

vue 订阅