uniapp app 将字符串导出为json文件

### 实现 UniApp 中将字符串导出为 JSON 文件在 UniApp 中实现将字符串导出为 JSON 文件的功能可以通过 JavaScript 的 `Blob` 对象以及 HTML5 提供的文件下载接口来完成。具体方法如下：创建一个函数用于处理字符串到 JSON 文件的转换并触发浏览器下载行为。 ```javascript function exportStringToJsonFile(jsonStr, filename) { const blob = new Blob([jsonStr], { type: 'application/json;charset=utf-8' }); if (navigator.msSaveOrOpenBlob) { navigator.msSaveOrOpenBlob(blob, `${filename}.json`); } else { const link = document.createElement('a'); link.href = URL.createObjectURL(blob); link.download = `${filename}.json`; document.body.appendChild(link); link.click(); document.body.removeChild(link); } } ``` 此段代码定义了一个名为 `exportStringToJsonFile` 函数，接受两个参数：一个是待导出的 JSON 字符串；另一个是要赋予该文件的名字[^2]。为了调用上述功能，在页面中可以设置按钮点击事件或其他交互方式来触发出这个操作。下面是一个简单的例子说明如何绑定这一逻辑至按钮上： ```html <button @click="handleExportJson">导出JSON</button> <script> import { ref } from 'vue'; export default { setup() { const jsonString = ref(JSON.stringify({ name: "张三", age: 20, city: "北京" }, null, 2)); function handleExportJson() { exportStringToJsonFile(jsonString.value, 'example'); } return { handleExportJson }; }, }; </script> ``` 这段 Vue 组件脚本展示了怎样通过按钮点击事件调用之前编写的 `exportStringToJsonFile` 方法，并传递具体的 JSON 数据作为参数[^1]。 #### 注意事项 - 需要注意的是不同浏览器对于文件下载的支持可能有所差异，因此建议测试多种环境下的兼容性。 - 如果是在移动端应用，则需考虑平台特性对文件系统的访问权限等问题。

阅读全文

CSDN会员

开通CSDN年卡参与万元壕礼抽奖

海量 VIP免费资源千本正版电子书商城会员专享价千门课程&专栏

全年可省5,000元立即开通