uniapp的h5端保存文件

诸葛博仌2024-03-02 13:49

1、安装file-saver：在你的uni-app项目中，使用npm安装file-saver库。你可以在项目根目录下打开终端或命令提示符，然后运行以下命令来安装file-saver：

bash 复制代码

npm i file-saver -S

2、引入file-saver：在你的uni-app组件或页面中，你可以使用import语句来引入file-saver。如果你只需要使用file-saver的saveAs方法，可以只引入该方法。以下是引入的示例代码：

bash 复制代码

import FileSaver from 'file-saver';

3、使用file-saver：一旦file-saver被正确引入，你就可以在你的组件或页面的方法中使用它来保存文件了。你可以调用FileSaver.saveAs方法，传入文件的URL和你想要保存的文件名作为参数。例如：

bash 复制代码

let imgUrl = 'http://www.test.com/img/xxxx.jpg'; // 网络图片地址
FileSaver.saveAs(imgUrl, '图片名称.jpg');

总结：

需要注意的是，由于uni-app的一些API在H5端不可用，例如uni.saveFile不支持H5，因此使用file-saver可以作为一种替代方案来实现在H5端保存文件的功能。