文件下载---txt文件下载

文件下载系列

文件流下载文件

图片下载

base64下载文件

TXT文件下载

适用场景:

       1、需求:点击直接下载txt文件,而不是在浏览器中打开新窗口(浏览器可识别txt文件,会直接在新的窗口打开预览文件)。

       2、项目中一般文件是存放在文件服务器上的,而文件服务器和项目地址又不同,如果使用读取文件内容的方式下载文件,则存在跨域问题,而又不准备配置文件服务器的跨域。

此下载方法必须提供文件后缀名,即“.txt ”

后端返回格式:字符串String

接收参数:

        fileName:文件名,必须,可带文件后缀也可忽略

        fileContent:要下载的txt文件的内容

// TXT文件下载方法
supplierTXTUpload(fileName, fileContent) {
    let txtFileName = fileName;
    if (txtFileName.substring(txtFileName.length - 4) !== '.txt') {
        txtFileName += '.txt';
    }
    if ('download' in document.createElement('a')) {
        const elink = document.createElement('a')
        elink.download = txtFileName
        elink.style.display = 'none'
        elink.href = 'data:text/paint;utf-8,' + fileContent
        document.body.appendChild(elink)
        elink.click()
        URL.revokeObjectURL(elink.href)
        document.body.removeChild(elink)
    } else {
        this.$message.error('您的浏览器暂不支持txt文件下载!')
    }
}

        此前在网上有看到以下方式(仅部分代码)来实现txt文件下载,经实测,虽然可以实现txt文件下载,但是initMouseEvent已被废弃了,虽可用但并不推荐

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);

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 您可以使用以下代码将 el-upload 组件设置为文件下载功能: ```html <el-upload class="download-btn" :action="downloadUrl" :headers="headers" :show-file-list="false" ref="downloadRef" > <el-button size="small" type="primary">下载</el-button> </el-upload> ``` 其中,`downloadUrl` 是您需要下载文件地址,`headers` 是您需要传递的请求头,可以根据您的需求设置,`show-file-list` 设置为 `false` 可以隐藏上传列表,`ref` 属性可以用来获取组件实例,方便后面的操作。 在组件的 `mounted` 钩子函数中,您可以使用以下代码来实现文件下载: ```javascript mounted() { this.$refs.downloadRef.$el.addEventListener('click', () => { const xhr = new XMLHttpRequest(); xhr.open('GET', this.downloadUrl, true); xhr.responseType = 'blob'; xhr.setRequestHeader('Authorization', this.headers.Authorization); xhr.onload = () => { if (xhr.status === 200) { const blob = new Blob([xhr.response], { type: xhr.response.type }); const url = URL.createObjectURL(blob); const link = document.createElement('a'); link.style.display = 'none'; link.href = url; link.setAttribute('download', '文件名'); document.body.appendChild(link); link.click(); document.body.removeChild(link); } else { this.$message.error('下载失败'); } }; xhr.send(); }); }, ``` 其中,`Authorization` 是您需要传递的认证信息,`blob` 是从服务器返回的二进制数据,`url` 是二进制数据的 URL,`link` 是一个用来下载的链接,`download` 属性是指定下载文件名,这里可以根据您的需求来设置。 通过上述代码实现后,您就可以在 el-upload 组件中实现文件下载的功能了。 ### 回答2: el-upload 是 Element UI 中的一个上传组件,用于实现文件上传功能。 要实现文件下载,需要以下几个步骤: 1. 后端准备:首先,后端需要提供一个能够处理文件下载请求的接口。该接口接收一个文件的唯一标识符(通常是文件 ID 或文件名),根据该标识符找到对应的文件,然后将文件以流的形式返回给前端。 2. 前端使用 el-upload:在前端页面中,使用 el-upload 组件作为文件下载的入口。设置组件的 action 属性为后端提供的文件下载接口地址。对于需要发送请求头信息的情况,可以设置 headers 属性。例如,如果需要身份验证,可以将 headers 属性设置为包含身份验证 Token 的对象。 3. 点击下载:通过添加一个按钮或者其他触发操作,当用户点击时,触发 el-upload 组件的上传方法,即可下载文件。 需要注意的是,el-upload 默认是实现文件上传功能的,但可以通过设置属性为上传/下载而实现文件下载功能。 总结起来,要实现 el-upload 文件下载功能,需要后端提供支持,并设置相关的配置和事件来触发文件下载操作。这样,用户就可以通过 el-upload 组件来上传或下载文件了。 ### 回答3: el-upload是一个基于Element UI的文件上传组件,用于实现文件上传功能。但是它本身并不直接支持文件下载功能,而是专注于文件上传的展示和管理。 文件下载功能通常需要配合后端服务器来实现,以下是一个简单的实现示例: 1.在前端页面中,使用el-upload组件上传文件: ```html <template> <el-upload action="/api/upload" // 设置上传文件的后端接口地址 :on-success="handleSuccess" // 上传成功回调函数 :on-error="handleError" // 上传失败回调函数 :before-upload="beforeUpload" // 上传前的处理函数 > <el-button size="small" type="primary">点击上传</el-button> </el-upload> </template> ``` 2.后端服务器接收上传的文件,并保存到指定的目录中。同时生成一个可下载的链接: ```javascript const express = require('express'); const app = express(); const path = require('path'); app.use(express.static(path.join(__dirname, 'public'))); app.post('/api/upload', (req, res) => { // 处理上传的文件逻辑,保存到指定目录 // 生成可下载的链接 const downloadLink = 'http://localhost:3000/public/filename.txt'; // 指定文件位置和文件名 res.json({ link: downloadLink }); // 返回可下载的链接给前端 }); app.listen(3000, () => { console.log('Server is running on port 3000'); }); ``` 3.前端接收到上传成功的响应后,通过链接进行文件下载: ```javascript export default { methods: { handleSuccess(response) { const downloadLink = response.link; // 获取下载链接 window.open(downloadLink); // 在新窗口中打开链接进行下载 }, handleError() { // 处理上传失败的逻辑 }, beforeUpload(file) { // 上传前的处理,如文件大小限制等 }, }, }; ``` 通过以上步骤,就能实现在el-upload组件上传文件后,后端服务器通过链接生成可下载文件,并在前端页面中进行文件下载的功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值