我可以在 CSV 下载器中显示 html 格式的文本吗

Question

我有报告称用户可以下载到

.csv

文件中，但一些字段具有来自所见即所得编辑器的 HTML 格式。有没有办法在

.csv

字段中显示 HTML？

这是我的

ExportReport.jsx

文件：

import CsvDownloader from "react-csv-downloader";
import moment from "moment";

const ExportReport = ({ reports }) => {
  let columns = [];
  let datas = [];

  if (reports) {
    columns = [
      {
        id: "matchType",
        displayName: "Match Type",
      },
      {
        id: "eventName",
        displayName: "Event Name",
      },
      {
        id: "matchDate",
        displayName: "Match Date",
      },
      {
        id: "opponentName",
        displayName: "Opponent Name",
      },
      {
        id: "weightCategory",
        displayName: "Weight Category",
      },
      {
        id: "club",
        displayName: "Club",
      },
      {
        id: "country",
        displayName: "Country",
      },
      {
        id: "rank",
        displayName: "Rank",
      },
      {
        id: "grip",
        displayName: "Grip",
      },
      {
        id: "opponentAttacks",
        displayName: "Opponent Attacks",
      },
      {
        id: "attackNotes",
        displayName: "Opponent Attack Notes",
      },
      {
        id: "myAttacks",
        displayName: "My Attacks",
      },
      {
        id: "My Attack Notes",
        displayName: "My Attack Notes",
      },
      {
        id: "result",
        displayName: "Result",
      },
      {
        id: "score",
        displayName: "score",
      },
      {
        id: "videoURL",
        displayName: "Video URL",
      },
    ];

    let opponentAttacks = "";
    let athleteAttacks = "";

    reports.map((report) => {
      report.opponentAttacks.map((attack) => {
        opponentAttacks += attack + " ";
      });
      report.athleteAttacks.map((attack) => {
        athleteAttacks += attack + " ";
      });
      datas.push({
        matchType: report.matchType,
        eventName: report.eventName,
        matchDate: moment(report.matchDate).format("MM/DD/YYYY"),
        //endtDate: report.eventEndDate,
        opponentName: report.opponentName,
        weightCategory: report.weightCategory,
        club: report.club,
        country: report.country,
        rank: report.rank,
        grip: report.grip,
        opponentAttacks: opponentAttacks,
        attackNotes: report.opponentAttackNotes,
        myAttacks: athleteAttacks,
        myAttachNotes: report.athleteAttackNotes,
        result: report.result,
        scor: report.scor,
        videoURL: report.videoURL,
      });
    });
  }
  return (
    <CsvDownloader
      filename="matchReport"
      extension=".csv"
      separator=","
      //wrapColumnChar="'"
      columns={columns}
      datas={datas}
      text="Download Reports"
      className="profile_btn"
    />
  );
};

export default ExportReport;

report.athleteAttackNotes

和

report.opponentAttackNotes

具有html格式，如果可能的话，我希望其显示为

.csv

文件中的格式。

在

report.opponentAttacks

的测试报告中，我在 .csv 文件中有一个测试报告：

<p>Rocky's attack notes</p><p><br></p><p><strong>Some Bold</strong></p>

如果可能的话，我希望此文本以 HTML 文件中提供的

<p></p>

和

<br>

标签提供的间距显示。

我也不受

.csv file

的束缚。 这只是我找到的下载报告的唯一解决方案。 如果还有其他方法请告诉我。

Answer 1

按照评论中的建议，谢谢@tripleee。 我的问题是，我试图在 .csv 中显示 html，根据定义，它是纯文本，所以我找到了另一个解决方案来下载到 Excel 中，以保留我的格式。

因此，我在之前下载 .csv 的页面上创建了一个按钮。 然后我创建了一个包含所有数据的表格，并添加了一个导出到 Excel 的按钮。

我需要稍微格式化一下，但这是 ReportsTable.jsx 文件：

const ReportsTable = ({ reports }) => {
  const exportTableToExcel = () => {
    // Get the table HTML
    const table = document.getElementById("my-table");
    if (!table) return;

    const tableHTML = table.outerHTML.replace(/ /g, "%20");

    // Specify the data type
    const dataType = "application/vnd.ms-excel";

    // Define the file name
    const fileName = "table.xls";

    // Create a download link element
    const downloadLink = document.createElement("a");

    // Browser check to support Microsoft Excel file download
    if (navigator.msSaveOrOpenBlob) {
      const blob = new Blob(["\ufeff", tableHTML], {
        type: dataType,
      });
      navigator.msSaveOrOpenBlob(blob, fileName);
    } else {
      // Create a link to the file
      downloadLink.href = `data:${dataType}, ${tableHTML}`;

      // Setting the file name
      downloadLink.download = fileName;

      // Triggering the function
      downloadLink.click();
    }
  };

  return (
    <div>
      <table id="my-table">
        <thead>
          <tr>
            <th>Match Type</th>
            <th>Event Name</th>
            <th>Match Date</th>
            <th>Opponent Name</th>
            <th>Weight Category</th>
            <th>Club</th>
            <th>Country</th>
            <th>Rank</th>
            <th>Grip</th>
            <th>Opponent Attacks</th>
            <th>Opponent Attack Notes</th>
            <th>My Attacks</th>
            <th>My Attack Notes</th>
            <th>Result</th>
            <th>Scot</th>
            <th>Video URL</th>
          </tr>
        </thead>
        <tbody>
          {reports &&
            reports.map((report) => (
              <tr>
                <td>{report.matchType}</td>
                <td>{report.eventName}</td>
                <td>{moment(report.matchDate).format("MM/DD/YYYY")}</td>
                <td>{report.opponentName}</td>
                <td>{report.weightCategory}</td>
                <td>{report.club}</td>
                <td>{report.country}</td>
                <td>{report.rank}</td>
                <td>{report.grip}</td>
                <td>{report.opponentAttacks}</td>
                <td>
                  <div
                    dangerouslySetInnerHTML={{
                      __html: `${report.opponentAttackNotes}`,
                    }}
                  />
                </td>
                <td>{report.athleteAttacks}</td>
                <td>
                  <div
                    dangerouslySetInnerHTML={{
                      __html: `${report.athleteAttackNotes}`,
                    }}
                  />
                </td>
                <td>{report.result}</td>
                <td>{report.scor}</td>
                <td>{report.videoURL}</td>
              </tr>
            ))}
        </tbody>
      </table>
      <button onClick={exportTableToExcel}>Export to Excel</button>
    </div>
  );
};

export default ReportsTable;