需求:点击 保存 按钮后输入保存的文件名,将 CodeMirror 中的代码写入文件,随后浏览器提供下载。
<el-button type="success" size="mini" icon="el-icon-download" @click="saveSQL">保存</el-button>
具体实现代码如下:
saveSQL() {
this.$prompt('请输入文件名', '保存SQL脚本到本地', {
confirmButtonText: '确定',
cancelButtonText: '取消',
inputPattern: /^(.)+$/,
inputErrorMessage: '文件名不能为空'
}).then(({ value }) => {
this.$message({
type: 'success',
message: '保存为: ' + value + '.sql'
});
this.fileName = value;
this.download_SQL();
}).catch(() => {
this.$message({
type: 'info',
message: '取消输入'
});
});
},
这里使用了 element-ui 的 MessageBox 弹框,校验完文件名后调用 download_SQL 方法,如下:
download_SQL() {
//定义文件内容,类型必须为Blob 否则createObjectURL会报错
let content = new Blob([window.JSON.stringify(global_varibles.sqlCode)])
//生成url对象
let urlObject = window.URL || window.webkitURL || window
let url = urlObject.createObjectURL(content)
//生成<a></a>DOM元素
let el = document.createElement('a')
//链接赋值
el.href = url
el.download = this.fileName + '.sql'
//必须点击否则不会下载
el.click()
//移除链接释放资源
urlObject.revokeObjectURL(url)
this.fileName = 'SQLscripts'
this.clearSQL()
}
这里的 global_varibles.sqlCode 即为 CodeMirror 代码编辑器中的内容。
注意:这里创建 Blob 文件对象时,写入的内容需要转换成 JSON 字符串,所以在打开文件时也需要进行相应的 parse 操作。