I have reports that users can download into a .csv file but a few of the fields have html formatting from a WYSIWYG editor. Is there a way to display the html in the field in the .csv field?
Here is my ExportReport.jsx fild:
<code>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;
</code>
<code>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;
</code>
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;
The report.athleteAttackNotes and report.opponentAttackNotes have html formatting and I would like that to display as formatted in the .csv file if possible.