vue 指定数据导出json/text文件
vue 2025-01-18 12:03:13

1、导出为json文件

JavaScript Code复制内容到剪贴板
  1. const downloadToTxt = () => {  
  2.   downloadConfirmLoading.value = true  
  3.   // 提取下标为 选中项 的元素  
  4.   const targetIndexes = checkedIds.value  
  5.   // const filteredResult = targetIndexes.map(index => openAIResult.value[index]);  
  6.   // 需要以更灵活的方式处理，使用 reduce 方法，只取每组的answer数据，别的不要  
  7.   const filteredResult = targetIndexes.reduce((acc, index) => {  
  8.     acc.push(openAIResult.value[index].answer)  
  9.     return acc;  
  10.   }, []);  
  11.   
  12.   // 创建a标签  
  13.   let a = document.createElement('a');  
  14.   // 设置导出文件名称  
  15.   a.download = downloadTitle.value + ".json";  
  16.   a.style.display = "none";  
  17.   // 转成字符串形式  
  18.   const dat = JSON.stringify(filteredResult, null, 4);  
  19.   // 转成blob流  
  20.   const blob = new Blob([dat], {  
  21.     type: "application/json"  
  22.   });  
  23.   // 将blob流转成url  
  24.   a.href = URL.createObjectURL(blob);  
  25.   document.body.appendChild(a);  
  26.   // 触发a标签 进行下载  
  27.   a.click();  
  28.   // 移出标签  
  29.   document.body.removeChild(a);  
  30.   
  31.   message.success('导出方案成功')  
  32.   
  33.   isEnableChecked.value = false  
  34.   checkedIds.value = []  
  35.   downloadConfirmLoading.value = false  
  36.   downloadVisible.value = false  
  37.   
  38.   // console.log(filteredResult);  
  39.   // console.log(checkedIds.value)  
  40. }  

 

 

2、导出为text文本文件

JavaScript Code复制内容到剪贴板
  1. downloadToTxt() {  
  2.   this.downloadConfirmLoading = true  
  3.   
  4.   // 需要以更灵活的方式处理，使用 reduce 方法，只取每组的answer数据，别的不要  
  5.   const filteredResult = this.parseContent.map(item => {  
  6.     return item.text  
  7.   })  
  8.   
  9.   // 创建a标签  
  10.   let a = document.createElement('a');  
  11.   // 设置导出文件名称  
  12.   a.download = "解析内容.txt";  
  13.   a.style.display = "none";  
  14.   
  15.   // 转换为文本格式，使用换行符分隔  
  16.   const dat = filteredResult.join('\n'); // 将每个文本项通过换行连接成一个字符串  
  17.   // 转成blob流，设置文本类型  
  18.   const blob = new Blob([dat], {  
  19.     type: "text/plain"  
  20.   });  
  21.   // 将blob流转成url  
  22.   a.href = URL.createObjectURL(blob);  
  23.   document.body.appendChild(a);  
  24.   
  25.   // 触发a标签 进行下载  
  26.   a.click();  
  27.   // 移出标签  
  28.   document.body.removeChild(a);  
  29.   
  30.   this.$message.success('导出文本成功')  
  31.   this.downloadConfirmLoading = false  
  32. }  

 

 

 

 

本文来自于：http://www.yoyo88.cn/study/vue/712.html

上一篇 在Vue3项目中展示markdown语法的文本
下一篇 返回列表
相关的文章
Powered by yoyo苏ICP备15045725号