Apex Code Development You need to sign in to do that
Don't have an account?
Constance HUA Word to Visual force to pdf
Hi guys,
I'm trying here to get a PDF from SF page. Therefore, I am creating the page on visualforce.
I am not a coder so I made the document on Word, saved as HTML and copied the code to my visualforce.
However, it seems that the writing is not the same as I had to add quotes and end tags like <\meta>. I did all that and in the end, I got the error : element <o:p> not known.
So I tried with Google Sheets to download as HTML and same : I have to close all elements again.
Help! :p
Here is the error : line 6, column 3: The element type "meta" must be terminated by the matching end-tag "</meta>"
Error: The element type "meta" must be terminated by the matching end-tag "</meta>".
Here is my current code :
I'm trying here to get a PDF from SF page. Therefore, I am creating the page on visualforce.
I am not a coder so I made the document on Word, saved as HTML and copied the code to my visualforce.
However, it seems that the writing is not the same as I had to add quotes and end tags like <\meta>. I did all that and in the end, I got the error : element <o:p> not known.
So I tried with Google Sheets to download as HTML and same : I have to close all elements again.
Help! :p
Here is the error : line 6, column 3: The element type "meta" must be terminated by the matching end-tag "</meta>"
Error: The element type "meta" must be terminated by the matching end-tag "</meta>".
Here is my current code :
<apex:page standardController="Account" renderAs="pdf" applyBodyTag="false">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<style type="text/css">
@import url('https://themes.googleusercontent.com/fonts/css?kit=fpjTOVmNbO4Lz34iLyptLVumN3ATOVc2BoeDKcwJhFTljiSzuFEcjsip7pjNdcnF');ol{margin:0;padding:0}table td,table th{padding:0}.c13{border-right-style:solid;padding:0pt 5.8pt 0pt 5.8pt;border-bottom-color:#000000;border-top-width:0pt;border-right-width:0pt;border-left-color:#000000;vertical-align:top;border-right-color:#000000;border-left-width:0pt;border-top-style:solid;border-left-style:solid;border-bottom-width:0pt;width:261.4pt;border-top-color:#000000;border-bottom-style:solid}.c12{color:#000000;font-weight:700;text-decoration:none;vertical-align:baseline;font-size:12pt;font-family:"Adobe Fan Heiti Std B";font-style:normal}.c2{color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:9pt;font-family:"Calibri";font-style:normal}.c6{color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:11pt;font-family:"Calibri";font-style:normal}.c10{color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:12pt;font-family:"Calibri";font-style:normal}.c4{padding-top:0pt;padding-bottom:0pt;line-height:1.0;text-align:right;margin-right:-5.5pt}.c9{padding-top:0pt;padding-bottom:0pt;line-height:1.0;text-align:left}.c0{padding-top:0pt;padding-bottom:0pt;line-height:1.0;text-align:justify}.c5{margin-left:-5.8pt;border-spacing:0;border-collapse:collapse;margin-right:auto}.c8{font-size:9pt;color:#1155cc;text-decoration:underline}.c3{background-color:#ffffff;max-width:529pt;padding:28.4pt 40.5pt 70.8pt 42.5pt}.c7{color:inherit;text-decoration:inherit}.c1{height:11pt}.c11{height:134pt}.title{padding-top:24pt;color:#000000;font-weight:700;font-size:36pt;padding-bottom:6pt;font-family:"Calibri";line-height:1.0;page-break-after:avoid;text-align:left}.subtitle{padding-top:18pt;color:#666666;font-size:24pt;padding-bottom:4pt;font-family:"Georgia";line-height:1.0;page-break-after:avoid;font-style:italic;text-align:left}li{color:#000000;font-size:11pt;font-family:"Calibri"}p{margin:0;color:#000000;font-size:11pt;font-family:"Calibri"}h1{padding-top:12pt;color:#2f5496;font-weight:700;font-size:18pt;padding-bottom:0pt;font-family:"Cambria";line-height:1.0;page-break-after:avoid;text-align:left}h2{padding-top:2pt;color:#2f5496;font-weight:700;font-size:13pt;padding-bottom:0pt;font-family:"Calibri";line-height:1.0;page-break-after:avoid;text-align:left}h3{padding-top:14pt;color:#000000;font-weight:700;font-size:14pt;padding-bottom:4pt;font-family:"Calibri";line-height:1.0;page-break-after:avoid;text-align:left}h4{padding-top:12pt;color:#000000;font-weight:700;font-size:12pt;padding-bottom:2pt;font-family:"Calibri";line-height:1.0;page-break-after:avoid;text-align:left}h5{padding-top:11pt;color:#000000;font-weight:700;font-size:11pt;padding-bottom:2pt;font-family:"Calibri";line-height:1.0;page-break-after:avoid;text-align:left}h6{padding-top:10pt;color:#000000;font-weight:700;font-size:10pt;padding-bottom:2pt;font-family:"Calibri";line-height:1.0;page-break-after:avoid;text-align:left}</style>
</head>
<body class="c3">
<p class="c9 c1" id="h.gjdgxs">
<span class="c6">
</span>
</p>
<a id="t.43237f724b83829791a3600f5d7a15de7edeb72b">
</a>
<a id="t.0">
</a>
<table class="c5">
<tbody>
<tr class="c11">
<td class="c13" colspan="1" rowspan="1">
<p class="c0">
<span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 211.94px; height: 100.48px;">
<img src="https://c.eu4.visual.force.com/resource/1494428198000/Logo_2017" style="width: 211.94px; height: 100.48px; margin-left: -0.00px; margin-top: -0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title="">
</span>
</p>
<p class="c0">
<span class="c2">
Pleyad Pôle Business - Immeuble Pleyad 2</span>
</p>
<p class="c0">
<span class="c2">47 boulevard Ornano</span>
</p>
<p class="c0">
<span class="c2">93521 Saint Denis – France</span>
</p>
<p class="c0">
<span class="c2">Tel : +33 1 48 20 20 30</span>
</p>
<p class="c0">
<span class="c8">
<a class="c7" href="https://www.google.com/url?q=http://www.neofi-solutions.com&sa=D&ust=1494580227154000&usg=AFQjCNG-79zmNmJ099Yk2AO5_V_zrntviA">www.neofi-solutions.com</a>
</span>
</p>
<p class="c0 c1">
<span class="c2">
</span>
</p>
</td>
<td class="c13" colspan="1" rowspan="1">
<p class="c4 c1">
<span class="c12">
</span>
</p>
<p class="c4 c1">
<span class="c12">
</span>
</p>
<p class="c4">
<span class="c12">FACTURE N° {!order.OrderNumber}</span>
</p>
<p class="c4">
<span class="c10">Date d’émission : {!Now()}</span>
</p>
</td>
</tr>
</tbody>
</table>
<p class="c9">
<span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 340.23px; height: 148.85px;">
<img src="https://c.eu4.visual.force.com/resource/1494436004000/Encadre_facture" style="width: 340.23px; height: 148.85px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title="">
</span>
<span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 340.23px; height: 148.85px;">
<img src="https://c.eu4.visual.force.com/resource/1494436004000/Encadre_facture" style="width: 340.23px; height: 148.85px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title="">
</span>
</p>
<p class="c1 c9">
<span class="c6">
</span>
</p>
<p class="c0 c1">
<span class="c2">
</span>
</p>
</body>
</apex:page>
Thank you so much in advance !
Thanks ,felt very happy regading your reply comments.
You mean to say convert from html to visualforce?
Please dont use Word document . What you have created is html not a word document.You have used word document to create the html.
One very easy way is you have to use xhtml format in html. That is every opening tag needs a closing tag. Normal html doesn't have strict check on the close tag .
ie : every tag has to be closed including meta .Html works though it is not closed.
Also for looping across all records , you need to know about <apex:repeat> in saleforce.
Let me know if you need any further help in salesforce code work,
Thanks and Regards,
Shiva RV
All Answers
I have made few modifications on the code and the code is working .It displays all the account number with image in it.
Please copy the below code and see if it works properly.
<apex:page standardController="Account" recordSetVar="AllAccounts" renderAs="pdf" applyBodyTag="false"> <head> <meta content="text/html; charset=UTF-8" http-equiv="content-type"> </meta> <style type="text/css"> @import url('https://themes.googleusercontent.com/fonts/css?kit=fpjTOVmNbO4Lz34iLyptLVumN3ATOVc2BoeDKcwJhFTljiSzuFEcjsip7pjNdcnF'); ol{margin:0;padding:0} table td,table th{padding:0} .c13{border-right-style:solid;padding:0pt 5.8pt 0pt 5.8pt;border-bottom-color:#000000;border-top-width:0pt;border-right-width:0pt;border-left-color:#000000;vertical-align:top;border-right-color:#000000;border-left-width:0pt;border-top-style:solid;border-left-style:solid;border-bottom-width:0pt;width:261.4pt;border-top-color:#000000;border-bottom-style:solid} .c12{color:#000000;font-weight:700;text-decoration:none;vertical-align:baseline;font-size:12pt;font-family:"Adobe Fan Heiti Std B";font-style:normal} .c2{color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:9pt;font-family:"Calibri";font-style:normal} .c6{color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:11pt;font-family:"Calibri";font-style:normal} .c10{color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:12pt;font-family:"Calibri";font-style:normal} .c4{padding-top:0pt;padding-bottom:0pt;line-height:1.0;text-align:right;margin-right:-5.5pt} .c9{padding-top:0pt;padding-bottom:0pt;line-height:1.0;text-align:left} .c0{padding-top:0pt;padding-bottom:0pt;line-height:1.0;text-align:justify} .c5{margin-left:-5.8pt;border-spacing:0;border-collapse:collapse;margin-right:auto} .c8{font-size:9pt;color:#1155cc;text-decoration:underline} .c3{background-color:#ffffff;max-width:529pt;padding:28.4pt 40.5pt 70.8pt 42.5pt} .c7{color:inherit;text-decoration:inherit}.c1{height:11pt}.c11{height:134pt} .title{padding-top:24pt;color:#000000;font-weight:700;font-size:36pt;padding-bottom:6pt;font-family:"Calibri";line-height:1.0;page-break-after:avoid;text-align:left} .subtitle{padding-top:18pt;color:#666666;font-size:24pt;padding-bottom:4pt;font-family:"Georgia";line-height:1.0;page-break-after:avoid;font-style:italic;text-align:left} li{color:#000000;font-size:11pt;font-family:"Calibri"} p{margin:0;color:#000000;font-size:11pt;font-family:"Calibri"} h1{padding-top:12pt;color:#2f5496;font-weight:700;font-size:18pt;padding-bottom:0pt;font-family:"Cambria";line-height:1.0;page-break-after:avoid;text-align:left} h2{padding-top:2pt;color:#2f5496;font-weight:700;font-size:13pt;padding-bottom:0pt;font-family:"Calibri";line-height:1.0;page-break-after:avoid;text-align:left} h3{padding-top:14pt;color:#000000;font-weight:700;font-size:14pt;padding-bottom:4pt;font-family:"Calibri";line-height:1.0;page-break-after:avoid;text-align:left} h4{padding-top:12pt;color:#000000;font-weight:700;font-size:12pt;padding-bottom:2pt;font-family:"Calibri";line-height:1.0;page-break-after:avoid;text-align:left} h5{padding-top:11pt;color:#000000;font-weight:700;font-size:11pt;padding-bottom:2pt;font-family:"Calibri";line-height:1.0;page-break-after:avoid;text-align:left} h6{padding-top:10pt;color:#000000;font-weight:700;font-size:10pt;padding-bottom:2pt;font-family:"Calibri";line-height:1.0;page-break-after:avoid;text-align:left} </style> </head> <body class="c3"> <p class="c9 c1" id="h.gjdgxs"> <span class="c6"> </span> </p> <a id="t.43237f724b83829791a3600f5d7a15de7edeb72b"> </a> <a id="t.0"> </a> <table class="c5"> <tbody> <apex:repeat value="{!AllAccounts}" var="acc"> <tr class="c11"> <td class="c13" colspan="1" rowspan="1"> <p class="c0"> <span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 211.94px; height: 100.48px;"> <img src="https://c.eu4.visual.force.com/resource/1494428198000/Logo_2017" style="width: 211.94px; height: 100.48px; margin-left: -0.00px; margin-top: -0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""> </img> </span> </p> <p class="c0"> <span class="c2"> Pleyad Pôle Business - Immeuble Pleyad 2</span> </p> <p class="c0"> <span class="c2">47 boulevard Ornano</span> </p> <p class="c0"> <span class="c2">93521 Saint Denis – France</span> </p> <p class="c0"> <span class="c2">Tel : +33 1 48 20 20 30</span> </p> <p class="c0"> <span class="c8"> <a class="c7" href="https://www.google.com/url?q=http://www.neofi-solutions.com&sa=D&ust=1494580227154000&usg=AFQjCNG-79zmNmJ099Yk2AO5_V_zrntviA">www.neofi-solutions.com</a> </span> </p> <p class="c0 c1"> <span class="c2"> </span> </p> </td> <td class="c13" colspan="1" rowspan="1"> <p class="c4 c1"> <span class="c12"> </span> </p> <p class="c4 c1"> <span class="c12"> </span> </p> <p class="c4"> <span class="c12">FACTURE N° {!acc.accountNumber}</span> </p> <p class="c4"> <span class="c10">Date d’émission : {!Now()}</span> </p> </td> </tr> </apex:repeat> </tbody> </table> <p class="c9"> <span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 340.23px; height: 148.85px;"> <img src="https://c.eu4.visual.force.com/resource/1494436004000/Encadre_facture" style="width: 340.23px; height: 148.85px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""> </img> </span> <span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 340.23px; height: 148.85px;"> <img src="https://c.eu4.visual.force.com/resource/1494436004000/Encadre_facture" style="width: 340.23px; height: 148.85px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""> </img> </span> </p> <p class="c1 c9"> <span class="c6"> </span> </p> <p class="c0 c1"> <span class="c2"> </span> </p> </body> </apex:page>Note :
The modifications i have made are
close tag for img and meta html tag </img> </meta> . Also used apex:repeat and used recordSetVar="AllAccounts" at the header
Let me know if this is the output you have expected.
Thanks and Regards,
Shiva RV
Thank you that's fantastic!
Do you know by any chance if there is an easy way to convert a word document in the correct code for visualforce?
All the best,
Constance
Thanks ,felt very happy regading your reply comments.
You mean to say convert from html to visualforce?
Please dont use Word document . What you have created is html not a word document.You have used word document to create the html.
One very easy way is you have to use xhtml format in html. That is every opening tag needs a closing tag. Normal html doesn't have strict check on the close tag .
ie : every tag has to be closed including meta .Html works though it is not closed.
Also for looping across all records , you need to know about <apex:repeat> in saleforce.
Let me know if you need any further help in salesforce code work,
Thanks and Regards,
Shiva RV
All the best
Constance