<%--
  Created by IntelliJ IDEA.
  User: wuxuan
  Date: 2024/3/21
  Time: 17:31
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
%>
<html>
<head>
    <title>Title</title>
    <style>
        .container {
            width: 60%;
            height: 100vh;
            display: flex;
            flex-direction: column;
            margin: 0 auto;
        }

        .title {
            width: 100%;
            height: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .image {
            max-width: 50%;
            max-height: 100%;
            margin: 10px auto;
        }

        .desc {
            font-size: 16px;
            font-weight: bold;
            margin: 5px 0;
        }
    </style>
</head>
<body>
<div class="container">
    <h1 class="title">CSV文件使用表格软件打开数字长度过长导致显示异常的问题解决方案</h1>

    <h2 class="title">WPS篇</h2>
    <div class="desc">第1步: 新建一个空白表格,找到软件的导入数据入口,不同版本位置或许不一样</div>
    <img src="<%=path%>/web/demo/wps_demo_0.png" alt="第一步" class="image">
    <div class="desc">第2步: 选中直接打开数据文件,点击选择数据源找到对应的CSV文件</div>
    <img src="<%=path%>/web/demo/wps_demo_1.jpg" alt="第二步" class="image">
    <div class="desc">第3步: 选择编码,其他编码,GBK编码格式</div>
    <img src="<%=path%>/web/demo/wps_demo_2.jpg" alt="第三步" class="image">
    <div class="desc">第4步: 原始数据类型选择分隔符号</div>
    <img src="<%=path%>/web/demo/wps_demo_3.jpg" alt="第四步" class="image">
    <div class="desc">第5步: 选择分隔符号,勾选逗号分割</div>
    <img src="<%=path%>/web/demo/wps_demo_4.jpg" alt="第五步" class="image">
    <div class="desc">第6步: 重点!点击下面已分割的列,选中精度丢失变为科学计数法的列,更改类型为文本,完成</div>
    <img src="<%=path%>/web/demo/wps_demo_5.jpg" alt="第六步" class="image">

    <h2 class="title">EXCEL篇</h2>
    <div class="desc">第1步: 新建一个空白表格,找到导入的入口,win端(非苹果电脑)和mac端(苹果电脑)软件布局可能不一样</div>
    <div class="desc">这是win端导入入口</div>
    <img class="image" src="<%=path%>/web/demo/excle_demo_win1.jpg" alt="第一步">
    <div class="desc">这是mac端导入入口</div>
    <img class="image" src="<%=path%>/web/demo/excle_demo_mac1.jpg" alt="第一步">
    <div class="desc">选择目标文件打开后,选择符号分割和文件编码,win端一般选择GBK或者GB2312</div>
    <img class="image" src="<%=path%>/web/demo/excle_demo_2.jpg" alt="第二步">
    <div class="desc">选择分隔符号,勾选逗号分割</div>
    <img class="image" src="<%=path%>/web/demo/excle_demo_3.jpg" alt="第三步">
    <div class="desc">重点!点击下面已分割的列,选中精度丢失变为科学计数法的列,更改类型为文本,完成</div>
    <img class="image" src="<%=path%>/web/demo/excle_demo_4.jpg" alt="第四步">
</div>
</body>
</html>
