js实现下载 .txt文件

6 篇文章 0 订阅

以vue为例:下载一个 blob 和 file-saver

// 引入
import { saveAs } from 'file-saver'
import Blob from 'blob'

我封装了一个方法
其中 content是 .txt文件内容
downloadName是下载txt名字(通常拼上时间戳)

downloadTxt (content, downloadName) {
  if (content) {
    var blob = new Blob([content], { type: 'text/plain;charset=utf-8' })
    saveAs(blob, downloadName + '.txt')
  }
}

好记性不如烂笔头,自己去试一下。

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你可以使用Vue.js和HTML5的File API来实现上传.txt文件、加载其内容,并在输入框中显示文件内容,而无需保存到服务器本地。下面是一个简单的示例代码: ```html <template> <div> <input type="file" @change="handleFileUpload" accept=".txt"> <textarea v-model="fileContent"></textarea> </div> </template> <script> export default { data() { return { fileContent: '' }; }, methods: { handleFileUpload(event) { const file = event.target.files[0]; if (file) { const reader = new FileReader(); reader.onload = (e) => { this.fileContent = e.target.result; }; reader.readAsText(file); } } } }; </script> ``` 在上面的示例中,我们使用了一个 `<input type="file">` 元素来允许用户选择上传的文件,并使用 `@change` 事件监听文件选择的变化。当用户选择文件后,`handleFileUpload` 方法会被调用。 在 `handleFileUpload` 方法中,我们首先获取选择的文件对象,并创建一个新的 `FileReader` 对象。然后,我们为 `FileReader` 的 `onload` 事件绑定一个回调函数。当文件读取完成后,回调函数会将文件内容以文本形式保存在 `e.target.result` 中,我们将其赋值给 `fileContent` 数据属性。 最后,我们将 `fileContent` 属性与 `<textarea>` 元素进行双向数据绑定,以便在输入框中显示文件的内容。 请注意,这个示例只支持上传并加载单个.txt文件,并且只能显示文本内容,如果你需要支持多个文件上传或其他类型的文件,请根据需求进行相应的修改。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值