批量新增—上传

                                                                  批量新增—上传

   之前做过了单条删除好批量删除,同样新增也有批量新增,在此之前没有接触过批量新增,一直做的都是单条新增,那么批量新增是如何实现的呢?这次要新增的是试题的新增,总不能一条一条的新增吧显得很麻烦效率又低,没有方法一次过新增,这时候就用批量新增方法了,批量新增方法是要有一定格式,不是说随便输入就可以的,要按照某种个格式才能录入到数据库里面,毕竟计算机没有人那么聪明会自己识别,要严格按照我们指定的格式录入数据才能保存到数据库。(如下图)这是一个word格式,我们事先做好个一个这样的模板,操作人员按照这模板的格式去输入就没问题了

实现批量新增的主要步骤

  1. 下载模板  2.上传试题 3.保存试题

总体来说批量删除的代码比较多涉及到的内容也是比较多的,虽然不我们熟悉这里的思路

首先接收到页面传过来的文件(HttpPostedFileBase file),做第一次判断判断这个文件(file)是否为空,如果是等于空的则直接返回到页面,不为空进行第二次判断验证,获取到file传过来的文件它的后缀名,第二次判断看是不是word文档,判断到不是文档格式则返回并提示,请选正确文档类型,在这个过程中有两次word文档处理,第一次把word文档保存临时文件夹里面,第二次是把word文档转化Html格式,后面要对着这些数据处理,主要就是对html的文件处理了,如判断到已经是一个word的文档,接下来要做的是把word文档保存到临时文件夹中,保存临时文件先就要自定义一个文件名

第一步

保存文件总需要保存的路径是吧(如上图),没路径保存去哪是不是,由路径找到相应的文件夹才能保存是不是,这里主要是判断路径是否存在,如果不存在文件夹则创建一个文件夹,存在该文件在后卖你拼接文件名,拼接存放该word文档的保存路径,

第二步

将word文档转化为html,然后再保存到指定文件夹

把word文档全部转换成html,是怎么做的呢?其实跟上面保存word文档是一样的,需要的步骤跟word同样,1.需要有文件名2.保存路径,首先就是定义一个名这里文件名和上面的文件名是不一样的,这里是要注意地方,有什么不一样呢?不一样就是后缀,上面的后缀是..doc或.docx,而这里的是.html,文件类型就不一样了。接着就是保存路径了,这里的后缀改了用新的名来进行拼接了,把word文档转换成html需要做的工作,需要用一个工具Spire.Doc for .NET。这个工具文件夹要复制到你项目目录中的packages文件夹中,然后引用该文件中net40中的所有文件。Spire.Doc for .NET是一款由E-iceblue公司开发的专业的Word .NET类库,使用该工具开发人员可以在任意.NET平台(C#,VB.NET,ASP.NET)上快速创建,读取,写入,转换,打印Word文档。作为一个独立的Word 组件,Spire.Doc的运行无需安装Microsoft Word。而且,它可以将Microsoft Word文档创建功能集成到开发者的任何.NET应用程序Spire.Doc.for .NET 是一个专业的word .NET库 ˈspaɪə(r)把文件读取document中再将文件转html格式并且保存到刚拼接的路径下。以上步骤完成后可以保存到临时文件夹了

接下来就是读文件的所有内容,也是我们上传题目的内容,做到这里你可以断一下点,把都读到数据拷出来,下面要做的是一些都是正则的匹配了

你可以使用以下步骤实现 Vue Excel 表格批量新增: 1. 首先,你需要安装并导入 `xlsx` 模块,它可以让你读取和写入 Excel 文件。你可以使用如下代码安装它: ``` npm install xlsx ``` 2. 在 Vue 组件中,你需要定义一个包含表格数据的数组。例如: ``` data() { return { tableData: [ { id: 1, name: 'John', age: 30 }, { id: 2, name: 'Alice', age: 25 } ] } } ``` 3. 在模板中,你需要添加一个文件上传组件和一个按钮,用于触发上传事件。例如: ``` <template> <div> <input type="file" ref="fileInput" @change="uploadFile"> <button @click="addRows">批量新增</button> <table> <thead> <tr> <th>ID</th> <th>姓名</th> <th>年龄</th> </tr> </thead> <tbody> <tr v-for="item in tableData" :key="item.id"> <td>{{ item.id }}</td> <td>{{ item.name }}</td> <td>{{ item.age }}</td> </tr> </tbody> </table> </div> </template> ``` 4. 在组件的方法中,你需要添加两个函数:`uploadFile` 和 `addRows`。`uploadFile` 函数用于读取上传的 Excel 文件,`addRows` 函数用于将文件中的数据添加到表格数据数组中。例如: ``` methods: { uploadFile() { const file = this.$refs.fileInput.files[0] const reader = new FileReader() reader.onload = (e) => { const data = new Uint8Array(e.target.result) const workbook = XLSX.read(data, { type: 'array' }) const sheetName = workbook.SheetNames[0] const worksheet = workbook.Sheets[sheetName] const json = XLSX.utils.sheet_to_json(worksheet) this.tableData = json } reader.readAsArrayBuffer(file) }, addRows() { // 这里可以处理数据并添加到 tableData 数组中 } } ``` 在 `uploadFile` 函数中,我们首先获取上传的文件,然后使用 `FileReader` 对象读取文件内容。一旦读取完成,我们使用 `xlsx` 模块将数据转换成 JSON 格式。最后,我们将 JSON 数据添加到 `tableData` 数组中,从而更新表格。 在 `addRows` 函数中,你可以处理表格数据并将处理后的数据添加到 `tableData` 数组中。例如,你可以使用 `Array.push()` 方法将新行添加到数组中。 这样,你就可以实现 Vue Excel 表格批量新增了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值