I am trying very hard to convert a HTML table into a readonly document with exactly the same display. It can be PDF, all sorts of image types or another type of document or file: it just can't be possible to edit this document. The conversion should happen on a user click and this is a widget for an android smartphone app (not used on browsers, its not a webpage!).
I've been trying to convert this HTML table into PDF with 'jspdf' but until now its not being possible. I'm using an online platform which allows me to use HTML and JS.
Here is a big part of my HTML:
<table>
<tr>
<td colspan="3" align="center" bgcolor="#2AD2C9"><h2>Purchase Order</h2></td>
</tr>
<tr>
<td colspan="3" align="center" bgcolor="#97D700"><h3>Equipamiento</h3></td>
</tr>
<tr>
<td align="center" bgcolor="#D4D4D4"></td>
<td align="center" bgcolor="#D4D4D4"><b><em>Tipo/Cantidad</em></b></td>
</tr>
<tr>
<td align="center" bgcolor="#D4D4D4">Modelo de Placa:</td>
<td align="center" bgcolor="#D4D4D4"><select id="tipoPlaca" size="1">
<option id="defaultP" value="0">Seleccione una placa</option>
</select>
</td>
</tr>
<tr>
<td align="center" bgcolor="#D4D4D4">Modelo de Inversor:</td>
<td align="center" bgcolor="#D4D4D4"><select id="tipoInversor" onchange="espacioArreglos()" size="1">
<option id="defaultI" value="0">Seleccione un inversor</option>
</select>
</td>
</tr>
<tr>
<td align="center" bgcolor="#F4F4F4">Longitud de PVC:</td>
<td align="center" bgcolor="#F4F4F4"><input type="number" id="longitudPVC" onchange="calculoCableria()" size="1"></td>
</tr>
<tr>
<td align="center" bgcolor="#D4D4D4">Cantidad de arreglos:</td>
<td align="center" bgcolor="#D4D4D4"><input type="number" id="cantidadArreglos" onchange="espacioArreglos()" size="1"></td>
</tr>
<tr>
<td align="center" bgcolor="#D4D4D4">Cantidad de placas:</td>
<td bgcolor="#FFFF00"><div id="container"></div></td>
</tr>
<tr>
<td colspan="3" align="center" bgcolor="#97D700"><h3>Total de equipamiento</h3>
</tr>
<tr>
<td align="center" bgcolor="#D4D4D4">Total de placas:</td>
<td align="center" bgcolor="#D4D4D4"><input type="number" id="totalPlacas" readonly></td>
</tr>
<tr>
<td align="center" bgcolor="#D4D4D4">Total de junctions:</td>
<td align="center" bgcolor="D4D4D4"><div id="totalJunctions"></div></td>
</tr>
On the end, I want to click on the 'ConvertPDF' button and it should automatically generate a PDF that would exactly look like the table made by me:
<tr>
<td align="center" bgcolor="#D4D4D4"><button type="reset" value="Reset" onclick="eliminarContenido('totalJunctions');clearArray();">Reset</button></td>
<td align="center" bgcolor="#D4D4D4"><input type="button" id="btnPrint" value="ConvertPDF" onclick="something()" /></td>
</tr>
I tried already different approaches seen in other posts using 'jspdf' but nothing worked so far... As you can see, I'm not an experienced programmer so I would appreciate very much some help to learn how to do this! It does not need to save a pdf, just needs to save in a type of file that you can't edit!
Related
I am having a template file which I am trying to convert into pdf. After googling a bit I found a framework called JSPDf. When I am trying to use it it gives me error Uncaught TypeError: Cannot read property 'name' of undefined jspdf.
we have two button 1->printDiv this one is working fine.
2->saveDiv this button having issue.when we are pressing this button to download pdf
i get console error like Uncaught TypeError: Cannot read property 'name' of undefined at tableToJson(jspdf.debug.js).
Here is My Code i put all code in single file.
index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/" crossorigin="anonymous"></script>
<script>
var doc = new jsPDF();
function saveDiv(divId, title) {
doc.fromHTML(`<html><head><title>${title}</title></head><body>` + document.getElementById(divId).innerHTML + `</body></html>`);
doc.save('div.pdf');
}
function printDiv(divId,
title) {
let mywindow = window.open('', 'PRINT', 'height=650,width=900,top=100,left=150');
mywindow.document.write(`<html><head><title>${title}</title>`);
mywindow.document.write('</head><body >');
mywindow.document.write(document.getElementById(divId).innerHTML);
mywindow.document.write('</body></html>');
mywindow.document.close(); // necessary for IE >= 10
mywindow.focus(); // necessary for IE >= 10*/
mywindow.print();
mywindow.close();
return true;
}
</script>
<style>
tbody {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
</style>
</head>
<body>
<p> </p>
<div id="pdf">
<p>
<font size="6" color="black"></font>
<table border="1" width="600">
<tbody>
<tr>
<td width="96">
<p><strong>PROJECT TITLE</strong></p>
</td>
<td colspan="3" width="225">
<p>HYATT CENTRIC KOTA KINABALU</p>
<p><Project N ame></p>
</td>
<td colspan="3" width="97">
<p><strong>PROJ.NO</strong></p>
</td>
<td colspan="2" width="182">
<p>HCKK1904</p>
<p><Project code></p>
</td>
</tr>
<tr>
<td width="96">
<p><strong>LOCATION</strong></p>
</td>
<td colspan="8" width="504">
<p>Lot 017512533 Along Jalan Haji Saman, 88000 Kota Kinabalu, Sabah.</p>
<p><Location></p>
</td>
</tr>
<tr>
<td width="96">
<p><strong>NO</strong></p>
</td>
<td colspan="3" width="225">
<p>RFI-001 <operation prefix -in sequence no></p>
</td>
<td colspan="2" width="96">
<p><strong>DATE</strong></p>
</td>
<td colspan="3" width="183">
<p>23/1/2020</p>
<p><Created date></p>
</td>
</tr>
<tr>
<td width="96">
<p><strong>TITLE</strong></p>
</td>
<td colspan="8" width="504">
<p>HCKK Blueprint Document</p>
<p><user entered title of operation title field></p>
</td>
</tr>
<tr>
<td width="96">
<p><strong>ASSIGNED TO</strong></p>
</td>
<td colspan="4" width="227">
<p>David Khor (Sunhill Ventures Sdn Bhd)</p>
<p><Assign To></p>
</td>
<td width="94">
<p><strong>PURPOSE</strong></p>
</td>
<td colspan="3" width="183">
<p>Approval</p>
<p><purpose></p>
</td>
</tr>
<tr>
<td width="96">
<p><strong>CC USERS</strong></p>
</td>
<td colspan="3" width="225">
<p>Chirs Chiew (Sunhill Ventures Sdn Bhd)<br /> Roy Chiew (Sunhill Ventures Sdn Bhd)</p>
<p><Cc user name’s></p>
</td>
<td colspan="2" width="96">
<p><strong>REQUESTED BY</strong></p>
</td>
<td colspan="3" width="183">
<p>Manfred weber</p>
<p>(Sunhill Ventures Sdn Bhd)</p>
<p><Created by name></p>
</td>
</tr>
<tr>
<td width="96">
<p><strong>DISCIPLINE</strong></p>
</td>
<td colspan="3" width="225">
<p>Architecture</p>
<p><User selected discipline ></p>
</td>
<td colspan="2" width="96">
<p><strong>DUE DATE:</strong></p>
</td>
<td colspan="3" width="183">
<p>25/1/2020</p>
<p><Action by></p>
</td>
</tr>
<tr>
<td colspan="9" width="600"> </td>
</tr>
<tr>
<td colspan="9" width="600">
<p><strong>DESCRIPTION</strong></p>
</td>
</tr>
<tr>
<td colspan="9" width="600">
<p>Sending the blueprint of the hckk1904 document for approval</p>
<p><Initiator description></p>
</td>
</tr>
<tr>
<td colspan="9" width="600"> </td>
</tr>
<tr>
<td colspan="9" width="600">
<p><strong>RESPONDANT COMMENT</strong></p>
</td>
</tr>
<tr>
<td colspan="9" width="600">
<p>Approving the blueprint document<strong> DATE:</strong></p>
<p><strong><< the assignee comments ></strong></p>
</td>
</tr>
<tr>
<td colspan="2" width="101">
<p><strong>LEAD RESPONDANT</strong></p>
</td>
<td width="122">
<p>David Khor (Sunhill Ventures Sdn Bhd)</p>
<p><strong><Assignee></strong></p>
</td>
<td width="98">
<p><strong>RESPONSE</strong></p>
</td>
<td colspan="3" width="97">
<p>Approved</p>
<p><Assignee status></p>
</td>
<td width="97">
<p><strong>RESPONDED DATE</strong></p>
</td>
<td width="85">
<p>23/1/2020</p>
<p><Assignee edited on></p>
</td>
</tr>
<tr>
<td colspan="2" width="101">
<p><strong>DOCUMENTS ATTACHED</strong></p>
</td>
<td colspan="7" width="499">
<p>Filename.pdf</p>
<p><file attachment names of the Created by / Assignee></p>
</td>
</tr>
</tbody>
</table>
<p> </p>
<p>This is a system generated document, no signature is required.</p>
</p>
</div>
</body>
<button onclick="printDiv('pdf','New Operations Details')">print div</button>
<button onclick="saveDiv('pdf','New Operations Details')">save div as pdf</button>
</html>
please help me..
fromHTML() is no longer being maintained from jsPDF. As the author himself said:
https://github.com/MrRio/jsPDF/issues/2268#issuecomment-460108597
I am trying to set width:13% of Date column. But it doesn't work in my way. Where is the problem? and can't reduce width of subject column. Thanks in advance.
Check FIDDLE
<div style="width:70%;float:left;">
<div>
<table style="width:100%;" class="TicketsDashboard">
<tbody>
<tr>
<td style="width:13%"><b>Date</b></td>
<td ><b>Type</b></td>
<td ><b>Subject</b></td>
<td ><b>Responsible</b></td>
<td ><b>Action</b></td>
</tr>
<tr style="cursor:pointer;" onclick="openDetailDiv('PROT-155',124)">
<td>2019-07-21 12:52:08</td>
<td>Recommendation</td>
<td>First Subject going on perfectly edited</td>
<td>perfect</td>
<td class="editButtonMain">Edit</td>
</tr>
<tr style="cursor:pointer;" onclick="openDetailDiv('PROT-155',125)">
<td>2019-07-21 12:53:26</td>
<td>Decision</td>
<td>lklk kdj djjdjdjdjdjdjdjdjdjdjdjdjdjdjjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdj</td>
<td>bangldesh</td>
<td class="editButtonMain">Edit</td>
</tr>
</tbody>
</table>
</div>
<br>
<div id="ticketButtons"><input type="button" class="Btn" onclick="openDiag({function: "item", id: 155, dialogTitle: this.value})" value="Add Protocol Item"></div>
</div>
<div style="width:30%;float:left">
<table style="width:100%;" class="lightborder" id="headTable">
<tbody>
<tr id="slaTr">
<td width="100" valign="top">SLA:</td>
<td>
<div id="effortDiv" style="width:50%;float:left;text-align:center;padding-bottom:10px;display:none"></div>
<div id="timeDiv" style="text-align:center;padding-bottom:10px;display:none"></div>
</td>
</tr>
<tr>
<td width="100">Status:</td>
<td id="statusTd">Suggestion</td>
</tr>
<tr>
<td>Protocol Number:</td>
<td id="breadCrumb">PROT-155</td>
</tr>
<tr>
<td>Subject:</td>
<td id="protsubject">Chonchol -- test</td>
</tr>
<tr>
<td>Start Date:</td>
<td id="protstartdate">0000-00-00 00:00:00</td>
</tr>
<tr>
<td>End Date:</td>
<td id="protenddate">0000-00-00 00:00:00</td>
</tr>
<tr>
<td>Keeper:</td>
<td id="protkeeper">ewrwer</td>
</tr>
</tbody>
</table>
</div>
your subject column is going out because u didn't used space in this code <td>lklk kdj djjdjdjdjdjdjdjdjdjdjdjdjdjdjjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdj</td> if you want to be stop exceeding you can give space like this <td>lklk kdj djjdjdjdjdjd jdjdjdjdjdjdjdj djjdjdjdjdjdjdj djdjdjdjdjdjdjdjdjdjdjdj djdjdjdjdjdjdjdjdjdjdjdjdjdjdj</td>
What actually you wanted to get let us know clearly.
To increase the width of td
instead of <td style="width:13%"> give <td style="padding-left:13%">
To avoid the overflow
add
<style>
table { table-layout:fixed; }
table td {word-wrap:break-word;}
</style>
Thanks,
the reason of it, you should set the same style for the given column in every rows, or add a thead section in which you set it once of the column.
the only problem i have now is i cant save my save my text in text field:
i have tried with java script, i dont know if this can work.
if you have an idea what i can do, it will be nice.
but i think that i have fixed the problem with the file error:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<td valign="top" bgcolor="#eoe1e2" align="center">
<table id="table-text" align="center" border="0" width="100%" height="700px">
<tr height="10px">
<td align="center"></td>
</tr>
<tr>
<td align="center" valign="top" width="100%">
<!-- BEGIN MAIN SECTION -->
<!---- BEGIN MAIN BODY OF PAGE ---->
<table align="center" border="0" width="80%">
<tr><td align=center> </td></tr>
<tr>
<td align="center" valign="center">
<form name='plugstatus' action='file:///C:/Users/mib/Desktop/sss.HTML' method='POST' id='plug_form'>
<table border=2 cellpadding=2 cellspacing=2>
<tr>
<td colspan='8' align='center'><b>PLUG CONTROL</b></td>
</tr>
<tr>
<td colspan='8' align='center'><b>Unit LOCAL</b></td>
</tr>
<tr bgcolor='#cfcfcf'>
<td valign='top'>PLUG</td>
<td valign='top'>NAME</td>
<td valign='top'>DEFAULT</td>
<td valign='top'>BOOT/SEQ.<br />DELAY</td>
<td valign='top'>STATUS</td>
<td valign='top'>PRIORITY</td>
<td valign='top'>ACTION</td>
</tr>
<tr>
<td bgcolor='#cfcfcf'>A1</td>
<td align='left' bgcolor='#cfcfcf'>
<input type="text" name="txtfield" id="txtfield" value=""
placeholder="input your text" onchange="storeitem(this.value)" />
</td>
<td bgcolor='#cfcfcf' align='center'>OFF</td>
<td bgcolor='#cfcfcf' align='center'>0.5 Secs</td>
<td bgcolor='#cfcfcf' align='center'>OFF</td>
<td bgcolor='#cfcfcf' align='center'>
1
</td>
<td bgcolor='#cfcfcf' align='center'>
<select name="u1plug1"><option value='0'>On</option><option value='2'>Off</select>
</td>
</tr>
<tr>
¨
<td bgcolor='#efefef'>A2</td>
<td align='left' bgcolor='#efefef'>BDK-ASR1002_RACK04</td>
<td bgcolor='#efefef' align='center'>OFF</td>
<td bgcolor='#efefef' align='center'>0.5 Secs</td>
<td bgcolor='#efefef' align='center'>OFF</td>
<td bgcolor='#efefef' align='center'>2</td>
<td bgcolor='#efefef' align='center'><select name="u1plug2"><option value='0'>On</option><option value='2'>Off</option></td>
</tr>
<tr>
</table>
<script language="javascript">
function storeitem(val) {
localStorage.setItem('txtfield', val)
}
function loaditem() {
var txtfield = document.getElementById('txtfield');
txtfield.value = localStorage.getItem('txtfield');
}
window.onload = loaditem;
</script>
<h1> </h1>
</body>
</html>
If you load your HTML from a local disk and only provide /cgi-bin/gethtml as the action, the browser will try to find this path on your local disk to load it.
This path will almost certainly be invalid (unless you are using a unix based OS and actually created the path /cgi-bin/), so you'll get the error message.
To make this work you need to either add the complete URL as action:
http://server.whatever/cgi-bin/gethtml
or load your HTML via HTTP from the server, so the relative path works.
Edit:
The directory /cgi-bin/ on a webserver has a special meaning, it contains scripts that are executed by the webserver, usually perl or similar scripting languages but they can also be binary programs.
These scripts/programs need to be executed by a webserver, they can't be used with file://... URIs. The same goes for evaluating form data.
i've got a problem i don't know how do solve it.
On my web page i load a table dynamically (and only the user want to) from an other apex application with:
function getParameter (filter){
var url;
var html;
filter = filter.replace(/ /g,'%20')
url = 'http://xxx.xxx.xxx.xxxx:8080/apex/f?p=PAR_PARAMETER:1:'+APP_SESSION+
':IR_REPORT_Query_Parameter::RIR,CIR:IR_P_SYS.SZGETTEXT(T.EZS_NO):'+filter;
html = $('#ParameterSettings').load(url +' .apexir_WORKSHEET_DATA');
}
this works fine.
My problem now is that the user can choose between: I want to edit the values, in this case the value col (display only) will be replaced with:
'<input type="text" value="|HTML|" size="30" maxlength="4000" class="P3_PARAMETER_VALUES">'
This also works fine, but how can i get the values that the user can now enter into the input field?
The table bevor it is editable:
<div id="P3_PARAMETERSETTING">
<table>
<thead></thead>
<tbody>
<tr>
<tr class="even">
<td headers="LINK">
<td align="left" headers="P_SYS.SZGETTEXT(T.EZS_NO)">(Dist) Driving time</td>
<td align="left" headers="NAME">REQ.data.source.trip</td>
<td align="left" headers="Value">tadaaa</td>
<td align="left" headers="Default">0</td>
<td align="left" headers="P_SYS.SZGETTEXT(D.EZS_NO)">Data source for trips to use in the query: 0 = all, 1 = online recorded data, 2 = vehicle recorded data</td>
<td align="left" headers="Max">2</td>
<td align="left" headers="Min">0</td>
</tr>
</tbody>
</table>
</div>
after switch to editable:
<div id="P3_PARAMETERSETTING">
<table>
<thead></thead>
<tbody>
<tr class="odd">
<td headers="LINK">
<td align="left" headers="P_SYS.SZGETTEXT(T.EZS_NO)">(Dist) Driving time</td>
<td align="left" headers="NAME">REQ.grid.value.size</td>
<td align="left" headers="Value">
<input class="P3_PARAMETER_VALUES" type="text" maxlength="4000" size="30" value="tadaaa">
</td>
<td align="left" headers="Default">60</td>
<td align="left" headers="P_SYS.SZGETTEXT(D.EZS_NO)">Default data query value grid size</td>
<td align="left" headers="Max">43200</td>
<td align="left" headers="Min">10</td>
</tr>
</tbody>
</table>
</div>
thanks
mario
if any one need more code just leave a comment.
If you're able to alter the HTML, then the simplest answer would be to ensure you add a unique id to each new input element.
<input id="VALUE_1" class="P3_PARAMETER_VALUES" type="text" maxlength="4000" size="30" value="tadaaa">
Then you can access with normal JavaScript
var value1 = document.getElementById('VALUE_1').value;
You could make this sort of selection more powerful by using a JavaScript library like jQuery:
http://jquery.com/
You may also want to look into contenteditable:
https://developer.mozilla.org/en-US/docs/HTML/Content_Editable
How can I change a page with this html code :
<tr>
<td nowrap title="7884">Ontem foi dia de</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td align="right">6,0</td></tr>
<tr>
to this one using greasemonkey :
<tr>
<td title="7884" nowrap="nowrap">ontem foi dia de</td>
<td> </td>
<td title="aprovadissimo" align="center" bgcolor="#ff8888">A</td>
<td title="Treze" align="center" bgcolor="#88ff88">13</td>
<td> </td>
<td bgcolor="#88ff88">Aprovado</td>
<td align="right">6,0</td></tr>
<tr>
have a look at http://diveintogreasemonkey.org/ and see about writing GreaseMoney Scripts
How are you determining which table cells should have which certain values in them? What are the rules you're going to have for this?