vue3+elementPlus项目支持生成、设置默认附件方式

 更新时间:2024年03月19日 09:01:55   投稿:jingxian  
这篇文章主要介绍了vue3+elementPlus项目支持生成、设置默认附件方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

背景

我们项目中的需求经常会有跳转从一个页面跳转到另一个页面的情况,比如a页面跳转到b页面,到b页面之后将a页面的数据带过来,或者回显数据。

但是能够把a页面的数据进行加上,然后当作b页面的默认附件吗?答案是肯定的。

一. 用到的技术栈

下面演示的项目是:vue3+elementPlus

上传附件的组件为el-upload

第三方库:xlsx

二. 代码解析

1.自动下载附件

import { saveAs } from 'file-saver';  
import XLSX from 'xlsx';  
  
// 假设你已经有了一个数据数组data  
const data = [  
  // ...你的数据  
];  
  
// 创建Excel工作簿和工作表  
const workbook = XLSX.utils.book_new();  
const worksheet = XLSX.utils.json_to_sheet(data);  
  
// 将工作表添加到工作簿  
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');  
  
// 将工作簿转换为二进制字符串  
const wbout = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });  
  
// 将二进制字符串转换为Blob对象  
const blob = new Blob([wbout], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });  
  
// 将Blob对象转换为File对象  
const file = new File([blob], 'data.xlsx', { type: blob.type });  
  
// 现在你可以使用file对象了,比如保存文件或上传到服务器  
saveAs(file, 'data.xlsx'); // 使用file-saver保存文件  
  
// 如果你需要上传这个File对象,你可以将它传递给相应的上传函数或API  
// uploadFunction(file); // 假设你有一个uploadFunction用于处理文件上传

saveAs(file, ‘data.xlsx’)为下载excel的功能

2.下载并设置默认附件

const generateExcel = async () => {
  // 假设你已经有了一个数据数组data  
const data = [  
  // ...你的数据  
];  

// 附件
const attatch = ref([])
  
// 创建Excel工作簿和工作表  
const workbook = XLSX.utils.book_new();  
const worksheet = XLSX.utils.json_to_sheet(data);  
  
// 将工作表添加到工作簿  
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');  
  
// 将工作簿转换为二进制字符串  
const wbout = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });  
  
// 将二进制字符串转换为Blob对象  
const blob = new Blob([wbout], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });  
  
// 将Blob对象转换为File对象  
const file = new File([blob], 'data.xlsx', { type: blob.type });  
 // 设置默认值
attatch.value =[file]
}

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue多层嵌套路由实例分析

    vue多层嵌套路由实例分析

    这篇文章主要介绍了vue多层嵌套路由,结合实例形式分析了vue.js多层嵌套路由的概念、原理及相关操作技巧,需要的朋友可以参考下
    2019-03-03
  • 解决vue中使用swiper插件问题及swiper在vue中的用法

    解决vue中使用swiper插件问题及swiper在vue中的用法

    Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端。这篇文章主要介绍了解决vue中使用swiper插件及swiper在vue中的用法,需要的朋友可以参考下
    2018-04-04
  • Vue中下载不同文件五种常用的方式

    Vue中下载不同文件五种常用的方式

    自己最近做项目的时候遇到需要下载文件的需求,索性这里给总结下,这篇文章主要给大家介绍了关于Vue中下载不同文件五种常用的方式,需要的朋友可以参考下
    2023-09-09
  • 手拉手教你如何处理vue项目中的错误

    手拉手教你如何处理vue项目中的错误

    在项目开发中经常遇到各种报错,每次总是通过这样或那样的办法解决掉,这篇文章主要给大家介绍了关于如何处理vue项目中错误的相关资料,需要的朋友可以参考下
    2022-06-06
  • 使用el-checkbox-group选中后值为true和false遇到的坑

    使用el-checkbox-group选中后值为true和false遇到的坑

    这篇文章主要介绍了使用el-checkbox-group选中后值为true和false遇到的坑及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07
  • vue中使用swiper5方式

    vue中使用swiper5方式

    这篇文章主要介绍了vue中使用swiper5方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • 解决Vue-cli npm run build生产环境打包,本地不能打开的问题

    解决Vue-cli npm run build生产环境打包,本地不能打开的问题

    今天小编就为大家分享一篇解决Vue-cli npm run build生产环境打包,本地不能打开的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • 在Vue环境下利用worker运行interval计时器的步骤

    在Vue环境下利用worker运行interval计时器的步骤

    这篇文章主要介绍了在Vue环境下利用worker运行interval计时器的步骤,本文分步骤给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-08
  • vue flex 布局实现div均分自动换行的示例代码

    vue flex 布局实现div均分自动换行的示例代码

    这篇文章主要介绍了vue flex 布局实现div均分自动换行,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-08-08
  • v-distpicker地区选择器组件使用实例详解

    v-distpicker地区选择器组件使用实例详解

    代码添加了一个vDistpickerHandle的事件处理函数对地区选择器中的数据进行处理,将数据存储到form对象的相应属性中,方便数据提交,这篇文章主要介绍了v-distpicker地区选择器组件使用,需要的朋友可以参考下
    2024-02-02

最新评论