持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第4天，点击查看活动详情

一、前言

本篇文章主要介绍Electron中如何实现txt文件的在线预览功能。这里是将这个预览功能放在了一个单独的窗口之中，实现效果就是点击txt文件预览，打开新窗口并展示预览内容。

二、实现步骤

当前环境electron11+vue。关键技术为FileReader.readAsText()，具体实现步骤如下：

1.创建txt预览窗口（CreateTxtPreviewWindow.js）

这一步咱们要借助electron的BrowserWindow来创建新的窗口，并通过loadFile方法来加载本地的文件。点击查看win.loadFile()

// CreateTxtPreviewWindow.js

import { BrowserWindow } from 'electron'
const path = require('path')

const CreateTxtPreviewWindow = function ({
  ...data
}) {
  const obj = {
    width: 1024,
    height: 640,
    show: false,
    fullscreenable: false, // 窗口是否可以进入全屏状态. 在 macOS上, 最大化/缩放按钮是否可用 默认值为
    transparent: false, // 窗口是否透明
    closable: true, // 窗口是否可关闭
    backgroundColor: '#ffffff',
    webPreferences: {
      nodeIntegration: true,
      webSecurity: false,
      enableRemoteModule: true,
      nodeIntegrationInWorker: true,
      nodeIntegrationInSubFrames: true,
      contextIsolation: false
    }
  }
  const txtPreview = new BrowserWindow(obj)
  txtPreview.setTitle(data.txtName)
  // 这里通过loadFile方法，加载本地的html文件，这里我把PreviewTxt.html放在了public文件夹下面，并且通过query将参数传递过去
  // eslint-disable-next-line no-undef
  txtPreview.loadFile(path.join(__static, '/electron/PreviewTxt.html'), { query: data })

  txtPreview.once('ready-to-show', () => {
    txtPreview.show()
  })
}
export default CreateTxtPreviewWindow

以下是关于loadFile的方法官方说明

win.loadFile(filePath[, options])

filePath string
options Object (可选)
- query Record<string, string> (可选) - 传递给 url.format().
- search string (可选) - 传递给 url.format().
- hash string (可选) - 传递给 url.format().

返回 Promise<void> - 当页面完成加载后 promise 将会resolve (见 did-finish-load)，如果页面加载失败，则 reject (见 did-fail-load)。

与 webContents.loadFile相同， filePath 应该是一个与你的应用程序的根路径相关的HTML文件路径。有关更多信息，请参阅webContents 文档。

2.创建文件预览的实现文件（PreviewTxt.html）

实现txt类型文件的预览功能，主要是依靠FileReader.readAsText()点击查看FileReader。

页面实现代码如下

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>文件预览</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
  </head>
  <body>
  </body>
  <script>
    // 获取地址栏上的参数
    let GetQueryString = name => {
      var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
      var r = window.location.search.substr(1).match(reg)
      if (r != null) return decodeURI(r[2])
      return null
    }
    // 获取txt的文件访问地址
    let txtUrl = GetQueryString('txtUrl')
    // 将地址进行转义
    txtUrl = decodeURIComponent(txtUrl)
    // 获取文件名字
    let txtName = GetQueryString('txtName')
    // 发起请求，获取txt文件的blob
    const xhr = new XMLHttpRequest()
    xhr.open('get', txtUrl, true)
    xhr.responseType = 'blob'
    xhr.onload = (e) => {
      const reader = new FileReader()
      reader.readAsText(e.target.response, 'utf-8')
      reader.onload = (evt) => {
        let data = evt.target.result
        // 这里做一步判断，若文件的编码格式为GBK，则重新读取一下，否则直接渲染到页面上
        if (data.indexOf('�') >= 0 || data.indexOf('') >= 0) {
          console.info('文件格式：ascii')
          const readerG = new FileReader()
          readerG.readAsText(e.target.response, 'GBK')
          readerG.onload = (evt) => {
            let data = evt.target.result
            document.write(data)
            document.title = txtName
          }
        } else {
          document.write(data)
        }
        document.title = txtName
      }
    }
    xhr.send()
  </script>
  <style>
    html,body {
      width: 100%;
      height: 100%;
    }
    body {
      margin: 0;
      margin: auto;
    }
  </style>
    
</html>

3.设置主进程与渲染进程的交互并调用

这里触发是要通过用户在渲染进程点击需要预览的txt文件，之后将信息传递给主进程，主进程接收到消息后创建txt文件预览窗口。

// 主进程

// 引入第一步创建好的txt预览窗口
import CreateTxtPreviewWindow from './windows/CreateTxtPreviewWindow'
ipcMain.on('createOtherWindow', (e, type, data) => {
    if (type === 'TxtPreview') {
      CreateTxtPreviewWindow(data)
    }
})

// 渲染进程

window.ipcRenderer.send('createOtherWindow', 'TxtPreview', {
    txtUrl: params.txtUrl, // txt文件访问地址
    txtName: params.txtName // 文件名称
})

以上我们就完成了txt文件的在线预览功能。

三、后记

这里的txt文件预览功能也可以不用在electron之中，在浏览器web端的项目也可以直接拿去使用。另外还可以通过引入wps，用wps来展示txt的内容来实现。

本篇完结！撒花！感谢观看！希望能帮助到你！

【Electron】如何实现TXT文件预览功能