Electron+Vue实现客户端本地存储和Word模板数据导出Electron+Vue实现客户端本地存储和Word模板

Electron+Vue实现客户端本地存储和Word模板数据导出

前言

哈喽，大家好，我是migor，一个乐于分享工作中所用的一些知识的人，今天给大家介绍一下Electron+Vue+nedb+docxtemplater开发支持数据存储，支持导出word模板的客户端开发思路。

事情是这样的，最近一政府的朋友想让帮他开发一个客户端，方便他录入数据，并将录入的数据存储，同时想按照Word模板导出数据。经过思索之后，放弃了 WPF 和 Flutter 技术栈，选择了 Electron+Vue 开发。

搭建项目

首先我们创建一个 Vue 项目，想必这个大家都非常熟悉了。

vue create electron-demo

前段时间我们介绍过 Vue3项目的搭建过程了，这里我们选择 Vue2 项目

正常 run 起来之后我们就能看到初始化项目界面了

集成Electron

在项目目录下面，我们执行以下命令来安装插件 vue-cli-plugin-electron-builder

vue add vue-cli-plugin-electron-builder

我们选择默认的版本^13.0.0

✔  Successfully installed plugin: vue-cli-plugin-electron-builder

? Choose Electron Version (Use arrow keys)
  ^11.0.0 
  ^12.0.0 
❯ ^13.0.0

等待安装完成之后，我们查看项目目录

.
├── README.md
├── babel.config.js
├── jsconfig.json
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── background.js
│   ├── components
│   │   └── HelloWorld.vue
│   └── main.js
└── vue.config.js

在这里我们可以发现在 src 目录下面多了个一个 background.js 文件

查看 package.json 文件，可以发现脚本里面多了个下面几个命令

我们执行 npm run electron:serve 命令，就可以看到 electron-vue 的桌面窗口了

集成Element-UI组件

安装 Element-UI 组件库

npm i elemenet-ui

在 main.js 文件中添加组件

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.config.productionTip = false

Vue.use(ElementUI)

new Vue({
  render: h => h(App),
}).$mount('#app')

至于按需引入，或者CDN 引入等不是这篇文章的重点，大家可以按照自己的喜欢进行配置。

实现数据持久化

由于开发后端成本较大，而且需求只需要本地存储即可，我们查看一下支持的存储方式

Cookies

Cookies 是最早的本地存储，是浏览器提供的功能，并且对服务器和 JS开发，这意味着我们可以通过服务器端和客户端保存 Cookies ，但是存储的数据总量大小只有 4KB, 超过这个限制就会忽略，无法进行存储了。

Local Storage & Session Storage

Local Storage 与 Session Storage 都属于 Web Storage。Web Storage 和 Cookies 类似，区别在于它有更大容量的存储。其中 Local Storage 是持久化的本地存储，除非我们主动删除数据，否则会一直存储在本地。Session Storage 只存在于 Session 会话中，也就是说只有在同一个 Session 的页面才能使用，当 Session 会话结束后，数据也会自动释放掉

Web SQL

WebSQL 是前端的一个独立模块，是 web 存储方式的一种，只是平常我们很少用到，目前只有 Chrome 支持。

主要方法：

openDatabase: 使用现有的数据库或者新建的数据库创建一个数据库对象

Transaction: 控制事务，基于这个情况执行提交或者回滚

executeSql: 执行 SQL 语句查询

基本操作和实际操作数据库基本一致，但是数据的最终去向，只是临时存储和大型网站的业务运行存储缓存的作用，页面刷新之后该库就不存在了。

IndexedDB

由于现有的浏览器存储方案，都不适合存储大量数据, 前面我们提到 Cookie 的大小不超过 4KB, 且每次请求都会发送回服务器；LocalStorage 存储大小在 2.5MB ~10MB 左右(每个浏览器不同)，并且不提供搜索功能，也不能建立自定义索引。所以诞生了 IndexedDB。

IndexedDB 是浏览器提供的本地数据库，允许储存大量数据，提供查找接口，还能建立索引。这些都是 LocalStorage 所不具备的。就数据库类型而言，IndexedDB 不属于关系型数据库（不支持 SQ 查询语句），更接近 NoSQL 数据库。

读写本地数据库文件

这里我们使用的是 Nedb，数据库的操作文档可以自己查看文档，我们执行安装

yarn add nedb # 或 npm install nedb --save

src/plugin/datastore.js文件中

import Vue from 'vue'
import Datastore from 'nedb'
import path from 'path'
import { remote } from 'electron'

export default new Datastore({
  autoload: true,
  filename: path.join(remote.app.getPath('userData'), '/data.db')
})

Vue.prototype.$db = db

在 main.js 中引入 db 对象，这样我们就能在所有的组件中使用 this.$db

import './plugin/datastore'

在 Vue 的组件中实现数据库的 CURD

this.$db.insert({对象},function(){
            
})
this.$db.find({条件},function(){
    //获取查询的数据
})

this.$db.update({条件},{$set:{更改的数据}},function(){
            
})

this.$db.remove({条件},{},function(){
            
})

这里我们通过界面的添加，增加了数据存储

同时通过查询，我们可以拿到存储的数据，渲染到界面的数据列表

至此，我们完成了数据的本地持久化。

导出Word模板

如果要实现纯前端 JS 导出 Word 文档功能，我们需要用到 docxtemplater , Jszip-utils, file-saver 三个库。

docxtemplater

docxtemplater 使用 JSON 数据格式作为输入，可以处理docx 和 ppt模板。不像一些其它的工具，比如 docx.js, docx4j, python-docx 等，需要自己编写代码来生成文件，docxtemplater只需要用户通过标签的形式编写模板，就可以生成文件。

jszip-utils

jszip-utils 提供一个getBinaryContent(path, data)接口，path即是文件的路径，支持AJAX get请求，data为读取的文件内容

file-saver

file-saver是一款适合在客户端生成文件的工具，它提供的接口saveAs(blob, "1.docx")将会使用到。

安装

npm i docxtemplater pizzip jszip-utils file-save

封装一下导出方法

export const exportWord = (data) => {
  JSZipUtils.getBinaryContent("/template.docx", function (err, content) {
    if(err) {
      console.log(err)
      return
    }

    let zip = new PizZip(content)
    let doc = new docxtemplater().loadZip(zip)

    doc.setData({
      table: data,
    })

    try {
      doc.render()
    } catch (err) {
      console.log(err)
      return
    }

    let out = doc.getZip().generate({
      type: "blob",
      mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
    })

    saveAs(out, "测试.docx")
  })
}