处理html文件，正常在浏览器展示---GBK编码文件转换成UTF8

看到标题，有很多童鞋可能会有疑惑，html文件，不就是能在浏览器运行的文件吗？是的，相信大家也注意到了，html文件是有编码格式的，我们写html文件代码，默认格式是utf-8格式，如果是GBK格式的html能否正常显示呢？大家不妨亲自试试。

背景

• 需求：处理GBK格式的html文件，让其正常在浏览器进行展示。
• 问题：利用WPS在进行doc转html结果，转出来的html文件格式有两种，一种是GBK格式，另外一种utf8格式，GBK格式的html文件在浏览器的展示时候，可能会出现乱码的情况
• 解决方式：通过老外写的一个JS开源库：iconv-lite，对GBK文件进行批量处理

一、GBK编码文件处理说明

iconv需要依赖native库，这样一来，在一些不支持native模块安装的虚拟主机和windows平台上，我们还是无法安心处理GBK编码。

老外写了一个通过纯Javascript转换编码的模块 iconv-lite

可以实现window下的转换 ，通过npm可以安装此模块，bufferhelper是一个操作buffer的加强类

首先安装

npm install iconv-lite
npm install bufferhelper

1）例子：后端进行转换

var http = require('http'), 
var url = require('url').parse('http://www.9958.pw/');
var iconv = require('iconv-lite'); 
var BufferHelper = require('bufferhelper');

http.get(url,function(res){
  var bufferHelper = new BufferHelper();
  res.on('data', function (chunk) {
    bufferHelper.concat(chunk);
  });
  res.on('end',function(){ 
    console.log(iconv.decode(bufferHelper.toBuffer(),'GBK'));
  });
})

二、具体实例案例

需求分析：

• 1、输入一个地址，循环读取文件功能
• 2、修改html文件的头，改成utf-8并保存
• 3、读取GBK格式文件内容，并转换进行保存为UTF-8格式

实现原理：

• 1、利用node.js，fs库的读取、修改、保存等功能
• 2、利用iconv-lite 库，进行GBK转换成utf-8

具体实现代码：

const path = require('path');
const fs = require('fs');
var iconv = require('iconv-lite'); 
var BufferHelper = require('bufferhelper');

  let index = 0;
  // 进行utf8 表头修改
  function changeType(type, filePath) {
    fs.readFile(
        path.resolve(__dirname, filePath),
        type,
        // 'utf8',
        (error, data) => {
          if (error) {
            console.error('read colover.xml fail');
          } else {
            if (!data) {
              reject('更新文件下载失败，请联系管理员');
            } else {
              let a = null;
              if (type === 'utf8') { // 替换gb2312成 utf-8
                a = replaceGbk(data);
              } else {                // 对文件进行处理，转换成utf8格式的文件
                a = gbkToutf8(data)
              }
              

              fs.writeFile(path.resolve(__dirname, filePath), a, (error)=>{
                console.log(error)
              });
            }
          }
        }
    );
  }
 
// gbkToutf8核心转换
  function gbkToutf8(data) {
    index += 1;
    console.log(index)
    var bufferHelper = new BufferHelper();
    bufferHelper.concat(data);
    const a = iconv.decode(bufferHelper.toBuffer(),'GBK')
    return a;
  }

  function replaceGbk(str) {
    index += 1;
    console.log(index)
    return str.replace('gb2312', 'utf-8')
  }


// 获取具体的文件
  function readFileList(dir) {
    const files = fs.readdirSync(dir);
    files.forEach((item, index) => {
        var fullPath = path.join(dir, item);
        const stat = fs.statSync(fullPath);
        if (stat.isDirectory()) {      
            readFileList(path.join(dir, item));  //递归读取文件
        } else { 
            // if (item === 'package.json') {
            if (item.indexOf('.html') > -1) {
              console.log(item);
              changeType('utf8', fullPath);
            }
            //   var content = fs.readFileSync(fullPath, 'utf-8');
            //   let uploadData = { license: '' };
            //   if (content) {
            //     uploadData = JSON.parse(content);
            //   }
            //   if (uploadData.license === 'GPL') {
            //     console.log(uploadData.license)
            //   }
            //   filesList.push(uploadData.license);
            // }                           
        }        
    });
}
 
  // 启动执行
readFileList('../allFile');