Vue.js 保存 CodeMirror 代码编辑器中的 SQL 脚本到本地

需求：点击 保存 按钮后输入保存的文件名，将 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 操作。