How to convert csv to html

GroupDocs.Conversion Cloud Product Family
1

Can somebody help me out .I m converting csv to html using groupdocs. But In the converted html I m getting this .

<p>This page uses frames, but your browser doesn't support them.</p>

Bellow is my code

let fileApi = conversion_cloud.FileApi.fromKeys(clientId, clientSecret);

let uploaRequest = new conversion_cloud.UploadFileRequest(filePath,filecontent);


await fileApi.uploadFile(uploaRequest).then(async (result, err) => {
  if (err) {
    console.log("upload- ", err);
    return res.status(500).send(false);
  } else {
    console.log(" document uploaded", result);
  }
  let loadOptions = new conversion_cloud.CsvLoadOptions();
  loadOptions.separator = ",";
  loadOptions.convertDateTimeData = true;

  
 convertOptions = new conversion_cloud.HtmlConvertOptions();
 convertOptions.fixedLayout = false;
 convertOptions.usePdf = false;

  let settings = new conversion_cloud.ConvertSettings();
  settings.filePath = filePath;
  settings.format = "html";
  settings.loadOptions = loadOptions;
  settings.convertOptions = convertOptions;
 

  result = await convertApi.convertDocument(
    new conversion_cloud.ConvertDocumentRequest(settings)
  );
  console.log("CSV file converted to HTML successfully.");
  // console.log('Output HTML file:', outputFile);
  return res.send({
    data: result.toString(),
  });
});
2

@Lokesh7351

The CSV to HTML conversion is working fine with my sample documents. Please share your input and output documents with us for investigation.

4

can u share your code

5

Bellow is my csv file content

Name,Age,Email,Address
John Doe,30,john.doe@example.com,123 Main St
Jane Smith,25,jane.smith@example.com,456 Elm Ave
Michael Johnson,28,michael.johnson@example.com,789 Oak Rd
Emily Williams,32,emily.williams@example.com,101 Pine Lane
6

Output:

{
    "data": "<!DOCTYPE html PUBLIC \"-//w3c//DTD XHTML 1.0 Frameset//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd\">\n<html xmlns:v=\"urn:schemas-microsoft-com:vml\"\nxmlns:o=\"urn:schemas-microsoft-com:office:office\"\nxmlns:x=\"urn:schemas-microsoft-com:office:excel\"\nxmlns=\"http://www.w3.org/TR/REC-html40\">\n\n<head>\n<meta name=\"Excel Workbook Frameset\" content=\"\"/>\n<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\"/>\n<meta name=\"ProgId\" content=\"Excel.Sheet\"/>\n<meta name=\"Generator\" content=\"Aspose.Cell 23.5\"/>\n<link rel=\"File-List\" href=\"/tmp/_files_files/filelist.xml\"/>\n<link rel=\"Edit-Time-Data\" href=\"_files_files/editdata.mso\"/>\n<link rel=\"OLE-Object-Data\" href=\"_files_files/oledata.mso\"/>\n<!--[if gte mso 9]><xml>\n <o:DocumentProperties>\n</o:DocumentProperties>\n</xml><![endif]-->\n<![if !supportTabStrip]>\n<link id=\"shLink\" href=\"/tmp/_files_files/sheet001.htm\"/>\n<link id=\"shLink\" href=\"/tmp/_files_files/sheet002.htm\"/>\n\n<link id=\"shLink\"/>\n\n<script language=\"JavaScript\" type=\"text/javascript\">\n<!--\n var c_lTabs=2;\n\n var c_rgszSh=new Array(c_lTabs);\n c_rgszSh[0]=\"Sheet1\";\n c_rgszSh[1]=\"Evaluation&nbsp;Warning\";\n\n\n\n var c_rgszClr=new Array(8);\n c_rgszClr[0]=\"window\";\n c_rgszClr[1]=\"buttonface\";\n c_rgszClr[2]=\"windowframe\";\n c_rgszClr[3]=\"windowtext\";\n c_rgszClr[4]=\"threedlightshadow\";\n c_rgszClr[5]=\"threedhighlight\";\n c_rgszClr[6]=\"threeddarkshadow\";\n c_rgszClr[7]=\"threedshadow\";\n\n var g_iShCur;\n var g_rglTabX=new Array(c_lTabs);\n\nfunction fnGetIEVer()\n{\n var ua=window.navigator.userAgent\n var msie=ua.indexOf(\"MSIE\")\n if (msie>0 && window.navigator.platform==\"Win32\")\n  return parseInt(ua.substring(msie+5,ua.indexOf(\".\", msie)));\n else\n  return 0;\n}\n\nfunction fnBuildFrameset()\n{\n var szHTML=\"<frameset rows=\\\"*,18\\\" border=\\\"0\\\" width=\\\"0\\\" frameborder=\\\"no\\\" framespacing=\\\"0\\\">\"+\n  \"<frame src=\\\"\"+document.all.item(\"shLink\")[1].href+\"\\\" name=\\\"frSheet\\\" noresize=\\\"noresize\\\">\"+\n  \"<frameset cols=\\\"54,*\\\" border=\\\"0\\\" width=\\\"0\\\" frameborder=\\\"no\\\" framespacing=\\\"0\\\">\"+\n  \"<frame src=\\\"\\\" name=\\\"frScroll\\\" marginwidth=\\\"0\\\" marginheight=\\\"0\\\" scrolling=\\\"no\\\">\"+\n  \"<frame src=\\\"\\\" name=\\\"frTabs\\\" marginwidth=\\\"0\\\" marginheight=\\\"0\\\" scrolling=\\\"no\\\">\"+\n  \"</frameset></frameset><plaintext>\";\n\n with (document) {\n  open(\"text/html\",\"replace\");\n  write(szHTML);\n  close();\n }\n\n fnBuildTabStrip();\n}\n\nfunction fnBuildTabStrip()\n{\n var szHTML=\n  \"<html><head><style>.clScroll {font:8pt Courier New;color:\"+c_rgszClr[6]+\";cursor:default;line-height:10pt;}\"+\n  \".clScroll2 {font:10pt Arial;color:\"+c_rgszClr[6]+\";cursor:default;line-height:11pt;}</style></head>\"+\n  \"<body onclick=\\\"event.returnValue=false;\\\" ondragstart=\\\"event.returnValue=false;\\\" onselectstart=\\\"event.returnValue=false;\\\" bgcolor=\\\"\"+c_rgszClr[4]+\"\\\" topmargin=\\\"0\\\" leftmargin=\\\"0\\\"><table cellpadding=\\\"0\\\" cellspacing=\\\"0\\\" width=\\\"100%\\\">\"+\n  \"<tr><td colspan=\\\"6\\\" height=\\\"1\\\" bgcolor=\\\"\"+c_rgszClr[2]+\"\\\"></td></tr>\"+\n  \"<tr><td style=\\\"font:1pt\\\">&nbsp;<td>\"+\n  \"<td valign=\\\"top\\\" id=\\\"tdScroll\\\" class=\\\"clScroll\\\" onclick=\\\"parent.fnFastScrollTabs(0);\\\" onmouseover=\\\"parent.fnMouseOverScroll(0);\\\" onmouseout=\\\"parent.fnMouseOutScroll(0);\\\"><a>&#171;</a></td>\"+\n  \"<td valign=\\\"top\\\" id=\\\"tdScroll\\\" class=\\\"clScroll2\\\" onclick=\\\"parent.fnScrollTabs(0);\\\" ondblclick=\\\"parent.fnScrollTabs(0);\\\" onmouseover=\\\"parent.fnMouseOverScroll(1);\\\" onmouseout=\\\"parent.fnMouseOutScroll(1);\\\"><a>&lt</a></td>\"+\n  \"<td valign=\\\"top\\\" id=\\\"tdScroll\\\" class=\\\"clScroll2\\\" onclick=\\\"parent.fnScrollTabs(1);\\\" ondblclick=\\\"parent.fnScrollTabs(1);\\\" onmouseover=\\\"parent.fnMouseOverScroll(2);\\\" onmouseout=\\\"parent.fnMouseOutScroll(2);\\\"><a>&gt</a></td>\"+\n  \"<td valign=\\\"top\\\" id=\\\"tdScroll\\\" class=\\\"clScroll\\\" onclick=\\\"parent.fnFastScrollTabs(1);\\\" onmouseover=\\\"parent.fnMouseOverScroll(3);\\\" onmouseout=\\\"parent.fnMouseOutScroll(3);\\\"><a>&#187;</a></td>\"+\n  \"<td style=\\\"font:1pt\\\">&nbsp;<td></tr></table></body></html>\";\n\n with (frames['frScroll'].document) {\n  open(\"text/html\",\"replace\");\n  write(szHTML);\n  close();\n }\n\n szHTML =\n  \"<html><head>\"+\n  \"<style>A:link,A:visited,A:active {text-decoration:none;\"+\"color:\"+c_rgszClr[3]+\";}\"+\n  \".clTab {cursor:hand;background:\"+c_rgszClr[1]+\";font:9pt Arial;padding-left:3px;padding-right:3px;text-align:center;}\"+\n  \".clBorder {background:\"+c_rgszClr[2]+\";font:1pt;}\"+\n  \"</style></head><body onload=\\\"parent.fnInit();\\\" onselectstart=\\\"event.returnValue=false;\\\" ondragstart=\\\"event.returnValue=false;\\\" bgcolor=\\\"\"+c_rgszClr[4]+\"\\\"\"+\n  \" topmargin=\\\"0\\\" leftmargin=\\\"0\\\"><table id=\\\"tbTabs\\\" cellpadding=\\\"0\\\" cellspacing=\\\"0\\\">\";\n\n var iCellCount=(c_lTabs+1)*2;\n\n var i;\n for (i=0;i<iCellCount;i+=2)\n  szHTML+=\"<col width=\\\"1\\\"><col>\";\n\n var iRow;\n for (iRow=0;iRow<6;iRow++) {\n\n  szHTML+=\"<tr>\";\n\n  if (iRow==5)\n   szHTML+=\"<td colspan=\"+iCellCount+\"></td>\";\n  else {\n   if (iRow==0) {\n    for(i=0;i<iCellCount;i++)\n     szHTML+=\"<td height=\\\"1\\\" class=\\\"clBorder\\\"></td>\";\n   } else if (iRow==1) {\n    for(i=0;i<c_lTabs;i++) {\n     szHTML+=\"<td height=\\\"1\\\" nowrap=\\\"nowrap\\\" class=\\\"clBorder\\\">&nbsp;</td>\";\n     szHTML+=\n      \"<td id=\\\"tdTab\\\" height=\\\"1\\\" nowrap=\\\"nowrap\\\" class=\\\"clTab\\\" onmouseover=\\\"parent.fnMouseOverTab(\"+i+\");\\\" onmouseout=\\\"parent.fnMouseOutTab(\"+i+\");\\\">\"+\n      \"<a href=\\\"\"+document.all.item(\"shLink\")[i].href+\"\\\" target=\\\"frSheet\\\" id=\\\"aTab\\\">&nbsp;\"+c_rgszSh[i]+\"&nbsp;</a></td>\";\n    }\n    szHTML+=\"<td id=\\\"tdTab\\\" height=\\\"1\\\" nowrap=\\\"nowrap\\\" class=\\\"clBorder\\\"><a id=\\\"aTab\\\">&nbsp;</a></td><td width=\\\"100%\\\"></td>\";\n   } else if (iRow==2) {\n    for (i=0;i<c_lTabs;i++)\n     szHTML+=\"<td height=\\\"1\\\"></td><td height=\\\"1\\\" class=\\\"clBorder\\\"></td>\";\n    szHTML+=\"<td height=\\\"1\\\"></td><td height=\\\"1\\\"></td>\";\n   } else if (iRow==3) {\n    for (i=0;i<iCellCount;i++)\n     szHTML+=\"<td height=\\\"1\\\"></td>\";\n   } else if (iRow==4) {\n    for (i=0;i<c_lTabs;i++)\n     szHTML+=\"<td height=\\\"1\\\" width=\\\"1\\\"></td><td height=\\\"1\\\"></td>\";\n    szHTML+=\"<td height=\\\"1\\\" width=\\\"1\\\"></td><td></td>\";\n   }\n  }\n  szHTML+=\"</tr>\";\n }\n\n szHTML+=\"</table></body></html>\";\n with (frames['frTabs'].document) {\n  open(\"text/html\",\"replace\");\n  charset=document.charset;\n  write(szHTML);\n  close();\n }\n}\n\nfunction fnInit()\n{\n g_rglTabX[0]=0;\n var i;\n for (i=1;i<=c_lTabs;i++)\n  with (frames['frTabs'].document.all.tbTabs.rows[1].cells[fnTabToCol(i-1)])\n   g_rglTabX[i]=offsetLeft+offsetWidth-6;\n}\n\nfunction fnTabToCol(iTab)\n{\n return 2*iTab+1;\n}\n\nfunction fnNextTab(fDir)\n{\n var iNextTab=-1;\n var i;\n\n with (frames['frTabs'].document.body) {\n  if (fDir==0) {\n   if (scrollLeft>0) {\n    for (i=0;i<c_lTabs&&g_rglTabX[i]<scrollLeft;i++);\n    if (i<c_lTabs)\n     iNextTab=i-1;\n   }\n  } else {\n   if (g_rglTabX[c_lTabs]+6>offsetWidth+scrollLeft) {\n    for (i=0;i<c_lTabs&&g_rglTabX[i]<=scrollLeft;i++);\n    if (i<c_lTabs)\n     iNextTab=i;\n   }\n  }\n }\n return iNextTab;\n}\n\nfunction fnScrollTabs(fDir)\n{\n var iNextTab=fnNextTab(fDir);\n\n if (iNextTab>=0) {\n  frames['frTabs'].scroll(g_rglTabX[iNextTab],0);\n  return true;\n } else\n  return false;\n}\n\nfunction fnFastScrollTabs(fDir)\n{\n if (c_lTabs>16)\n  frames['frTabs'].scroll(g_rglTabX[fDir?c_lTabs-1:0],0);\n else\n  if (fnScrollTabs(fDir)>0) window.setTimeout(\"fnFastScrollTabs(\"+fDir+\");\",5);\n}\n\nfunction fnSetTabProps(iTab,fActive)\n{\n var iCol=fnTabToCol(iTab);\n var i;\n\n if (iTab>=0) {\n  with (frames['frTabs'].document.all) {\n   with (tbTabs) {\n    for (i=0;i<=4;i++) {\n     with (rows[i]) {\n      if (i==0)\n       cells[iCol].style.background=c_rgszClr[fActive?0:2];\n      else if (i>0 && i<4) {\n       if (fActive) {\n        cells[iCol-1].style.background=c_rgszClr[2];\n        cells[iCol].style.background=c_rgszClr[0];\n        cells[iCol+1].style.background=c_rgszClr[2];\n       } else {\n        if (i==1) {\n         cells[iCol-1].style.background=c_rgszClr[2];\n         cells[iCol].style.background=c_rgszClr[1];\n         cells[iCol+1].style.background=c_rgszClr[2];\n        } else {\n         cells[iCol-1].style.background=c_rgszClr[4];\n         cells[iCol].style.background=c_rgszClr[(i==2)?2:4];\n         cells[iCol+1].style.background=c_rgszClr[4];\n        }\n       }\n      } else\n       cells[iCol].style.background=c_rgszClr[fActive?2:4];\n     }\n    }\n   }\n   with (aTab[iTab].style) {\n    cursor=(fActive?\"default\":\"hand\");\n    color=c_rgszClr[3];\n   }\n  }\n }\n}\n\nfunction fnMouseOverScroll(iCtl)\n{\n frames['frScroll'].document.all.tdScroll[iCtl].style.color=c_rgszClr[7];\n}\n\nfunction fnMouseOutScroll(iCtl)\n{\n frames['frScroll'].document.all.tdScroll[iCtl].style.color=c_rgszClr[6];\n}\n\nfunction fnMouseOverTab(iTab)\n{\n if (iTab!=g_iShCur) {\n  var iCol=fnTabToCol(iTab);\n  with (frames['frTabs'].document.all) {\n   tdTab[iTab].style.background=c_rgszClr[5];\n  }\n }\n}\n\nfunction fnMouseOutTab(iTab)\n{\n if (iTab>=0) {\n  var elFrom=frames['frTabs'].event.srcElement;\n  var elTo=frames['frTabs'].event.toElement;\n\n  if ((!elTo) ||\n   (elFrom.tagName==elTo.tagName) ||\n   (elTo.tagName==\"A\" && elTo.parentElement!=elFrom) ||\n   (elFrom.tagName==\"A\" && elFrom.parentElement!=elTo)) {\n\n   if (iTab!=g_iShCur) {\n    with (frames['frTabs'].document.all) {\n     tdTab[iTab].style.background=c_rgszClr[1];\n    }\n   }\n  }\n }\n}\n\nfunction fnSetActiveSheet(iSh)\n{\n if (iSh!=g_iShCur) {\n  fnSetTabProps(g_iShCur,false);\n  fnSetTabProps(iSh,true);\n  g_iShCur=iSh;\n }\n}\n\n window.g_iIEVer=fnGetIEVer();\n if (window.g_iIEVer>=4)\n  fnBuildFrameset();\n//-->\n\n</script>\n<![endif]>\n<!--[if gte mso 9]><xml>\n <x:ExcelWorkbook>\n  <x:ExcelWorksheets>\n   <x:ExcelWorksheet>\n    <x:Name>Sheet1</x:Name>\n    <x:WorksheetSource HRef=\"/tmp/_files_files/sheet001.htm\"/>\n   </x:ExcelWorksheet>\n   <x:ExcelWorksheet>\n    <x:Name>Evaluation Warning</x:Name>\n    <x:WorksheetSource HRef=\"/tmp/_files_files/sheet002.htm\"/>\n   </x:ExcelWorksheet>\n  </x:ExcelWorksheets>\n  <x:Stylesheet HRef=\"/tmp/_files_files/stylesheet.css\"/>\n  <x:WindowHeight>9225</x:WindowHeight>\n  <x:WindowWidth>14940</x:WindowWidth>\n  <x:WindowTopX>240</x:WindowTopX>\n  <x:WindowTopY>120</x:WindowTopY>\n  <x:RefModeR1C1/>\n  <x:TabRatio>600</x:TabRatio>\n  <x:ActiveSheet>1</x:ActiveSheet>\n </x:ExcelWorkbook>\n</xml><![endif]-->\n</head>\n    <frameset rows=\"*,39\">\n     <frame src=\"/tmp/_files_files/sheet002.htm\" name=\"frSheet\"/>\n     <frame src=\"/tmp/_files_files/tabstrip.htm\" name=\"frTabs\" marginwidth=\"0\" marginheight=\"0\"/>\n     <noframes>\n      <body>\n       <p>This page uses frames, but your browser doesn't support them.</p>\n      </body>\n     </noframes>\n    </frameset>\n</html>\n"
}
7

@Lokesh7351

Please find the sample Node.js code to convert a CSV file to HTML from your local drive. Test_cust.zip (1.9 KB)

// load the module
var GroupDocs = require('groupdocs-conversion-cloud');
var fs = require('fs');

// get your appSid and appKey at https://dashboard.groupdocs.cloud (free registration is required).
var appSid = "xxxxxxx-xxxx-xxxxx-xxxx-xxxxxxxxx";
var appKey = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";

const convertDocument = async () => {

// construct Api
var convertApi = GroupDocs.ConvertApi.fromKeys(appSid, appKey);


try {
    const format = "html";
    const loadOptions = new GroupDocs.CsvLoadOptions();
    const csvContent = fs.readFileSync('Test_cust.csv');
    loadOptions.format = "csv";

    const request = new GroupDocs.ConvertDocumentDirectRequest(
      format,
      csvContent,
      undefined,
      undefined,
      loadOptions,
      undefined);

    // convert document directly
      const result = await convertApi.convertDocumentDirect(request);
	console.log(result);
	fs.writeFileSync("CsvtoHTML.html", result);

} catch (err) {
throw err;
}
}

convertDocument()
.then(() => {
console.log("Document converted successfully");
})
.catch((err) => {
console.log("Error occurred while converting the document:", err);
})
8

yes …csv is converting. But when we are opening the converted html in the browser , then their is some text missing in the details.

For Instance ,if you review the converted HTML file.when you will open that file then in email ids after @ the text is missing .

How to fix this ?

9

If we are entering a large piece of text in a column, only half of it is being displayed in the converted html

10

@Lokesh7351
We have opened the following new ticket(s) in our internal issue tracking system and will deliver their fixes according to the terms mentioned in Free Support Policies.

Issue ID(s): CONVERSIONCLOUD-522
11

Can you tell me why this issue has been marked as ‘Blocked’?
Issue ID(s): CONVERSIONCLOUD-522

12

@Lokesh7351

Please note that after investigation, we noticed that the issue lies in the parent library (GroupDocs.Conversion for .NET) of GroupDocs.Conversion Cloud API. So we have logged a ticket in our internal system to fix the issue in GroupDocs.Conversion for .NET that is blocking the GroupDocs.Conversion Cloud API ticket.

13

The issues you have found earlier (filed as CONVERSIONCLOUD-522) have been fixed in this update. This message was posted using Bugs notification tool by sergei.terentev

1 Like
14

The table borders are still not appearing in converted html.

15

@Lokesh7351

We have noticed the issue and logged an enhancement ticket(CONVERSIONCLOUD-535) for the requirement. We will notify you as soon as it is fixed.

16

The issues you have found earlier (filed as CONVERSIONCLOUD-535) have been fixed in this update. This message was posted using Bugs notification tool by sergei.terentev

17

CONVERSIONCLOUD-535

Issue still not Fixed.

18

@Lokesh7351

Please use the ShowGridLines option, as shown in the example below; it will resolve the issue.

{
  "FilePath": "Test.csv",
  "Format": "html",
  "LoadOptions": {
    "ShowGridLines": true
  },  
  "OutputPath": "Test_cust.html"
}
19

OK . Is it possible to adjust the size of the table in the converted HTML?

20

@Lokesh7351

We will look into your requirements and update you accordingly.