在线预览csv文件

最新推荐文章于 2025-03-29 10:20:12 发布

ddx2019

最新推荐文章于 2025-03-29 10:20:12 发布

阅读量4.9k

点赞数 2

分类专栏： Vue 文章标签： heiho的使用 papaparse的使用 heiho预览csv文件 papaparse预览csv 在线预览本地csv文件

本文链接：https://blog.youkuaiyun.com/ddx2019/article/details/115234958

版权

Vue 专栏收录该内容

7 篇文章

订阅专栏

一、所需插件

注意： 第一、二点处的示例，是vue2项目中使用的情况。

在index.html中引入 heiho.js

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kktsvetkov/heiho@latest/heiho.css"/>
<script src="https://cdn.jsdelivr.net/gh/kktsvetkov/heiho@latest/heiho.js"></script>

安装papaparse, jschardet ，并在需要用的页面中引入并使用；

yarn  add  jschardet
yarn add papaparse

二、打开本地csv文件

若你需要解析本地csv文件， Papa.parse的第一个参数是file文件.参考：local-files

<template>
  <div class="preview-csv">
    <input type="file" ref="upload-csv" accept=".csv" />
    <el-button type="primary" @click="handleClick">Read CSV</el-button>
  </div>
</template>
<script>
import Papa from "papaparse";
const jschardet = require("jschardet");
export default {
  data() {
    return {
      csv: [
        ["a", "b", "c"],
        [1, 2, 3],
        [4, 5, 6]
      ],
      encoding: ""
    };
  },
  mounted() {
    // Heiho(this.csv);
  },
  methods: {
    handleClick() {
      // 若文件要从后台获取，将事件监听换成 调用后台接口的操作即可；
      const that = this;
      const file = that.$refs["upload-csv"].files[0];
      const fReader = new FileReader();
      fReader.readAsDataURL(file);
      fReader.onload = function(evt) {
        const data = evt.target.result;
        that.encoding = that.checkEncoding(data);
        that.parseCsvFile(file);
      };
    },
    parseCsvFile(file) {
      //引入Papaparse.js，将数据转换成二维数组
      Papa.parse(file, {
        encoding: this.encoding,
        complete: function(results) {
          const arrs = results.data;
          // 去除最后的空行
          const lastItem = arrs[arrs.length - 1].every(val => val === "");
          lastItem && arrs.pop();
          // 通过heiho.js预览csv:https://github.com/kktsvetkov/heiho
          Heiho(arrs);
        }
      });
    },
    checkEncoding(base64Str) {
      // 要用二进制格式
      const str = atob(base64Str.split(";base64,")[1]);
      let encoding = jschardet.detect(str).encoding;
      encoding === "windows-1252" && (encoding = "ANSI"); // 有时会识别错误（如UTF8的中文二字）若这里中文还是出现了乱码问题，可将encoding设置为gb18030（全称： 信息技术 中文编码字符集）
      return encoding;
    }
  }
};
</script>

在这里插入图片描述
页面初始效果：

预览效果如图：

相关链接：

PapaParse：https://github.com/mholt/PapaParse
jschardet：https://github.com/aadsm/jschardet#readme
heiho：https://github.com/kktsvetkov/heiho
解决中文乱码，参考博客：https://blog.youkuaiyun.com/qq_40544291/article/details/105823673

三、下载远程csv文件

若你拿到的是一个在线文件地址， Papa.parse(的第一个参数是该csv文件的URL地址。

在html文件中，使用papaparse.js和heiho.js预览csv文件，只需引入相应的js和css文件即可（使用同vue中）。

参考：remote-files

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>在线预览csv文件</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/gh/kktsvetkov/heiho@latest/heiho.css"
    />
    <script src="https://cdn.jsdelivr.net/gh/kktsvetkov/heiho@latest/heiho.js"></script>
  </head>
  <body>
    <script src="https://unpkg.com/papaparse@5.3.0/papaparse.min.js"></script>
    <script>
      Papa.parse(
        'https://support.staffbase.com/hc/en-us/article_attachments/360009197071/email.csv',
        {
          download: true,
          complete: function (results) {
            console.log('results :', results);
            Heiho(results.data);
          }
        }
      );
    </script>
  </body>
</html>