The project I have is to create a Vista Print like application. I have created a very basic interface that places a resizable div in an area that can be dragged around. I am also able to place text into this div via pop-up iframe with designmode. I then write this to a database.
I then call this data and create a pdf using Coldfusions cfdocument.
The issue is when the PDF is created the font looks slightly thicker and the word wrap is different than the html page interface which is very important. Note: The word wraps are determined by the divs height and width. It looks fine on the cfdocument process page it is just off when the pdf is created. Anyone have any ideas on this or can point me to some info that could help?
Thanks in advance.
Code Here:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<cfset webRes = "96">
<cfset pxlWidth = "921">
<cfset pxlHeight = "1178">
<cfset inWidth = (pxlWidth/webres)>
<cfset inHeight = (pxlHeight/webres)>
<cfquery name="qTextData" datasource="ds">
SELECT DocID, TextID, Width, Height, PosX, PosY, FontFamily, FontColor, FontSize, TextValue
FROM TextEditor
WHERE ((DocID = #session.docid#))
</cfquery>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Create PDF</title>
</head>
<cfoutput>
<cfdocument filename="mypdf.pdf" name="mypdf" fontembed="yes" format="pdf" overwrite="yes" pageheight="#inHeight#" pagewidth="#inWidth#" pagetype="custom">
<cfdocumentsection margintop="0" marginright="0" marginbottom="0" marginleft="0">
<body align="center" marginheight="0" marginwidth="0">
<div id="pageContainer" style="background-image:url(resources/image.caspx.jpg); background-repeat:no-repeat; height:#pxlHeight#px; width:#pxlWidth#px;">
<cfloop query="qTextData">
<div id="divTextField_#TextID#" style="position:absolute; top:#PosY#px; left:#PosX#px; width:#width#px; height:#Height#px; color:#FontColor#; font-family:#FontFamily#; font-size:#FontSize#pt; vertical-align:text-top; line-spacing:normal;">
#TextValue#
</div>
</cfloop>
</div>
</body>
</cfdocumentsection>
</cfdocument>
</cfoutput>
<script type="text/javascript">
window.open('http://linktopdf/mypdf.pdf','newWin','resizable=1');
</script>
</html>
I tried making this a comment but I started getting long winded and it was too large so it may not be the "answer" but if nothing else I'm sure it will have some helpful information in it.
What % are you viewing at and have you tried printing it out?
I've noticed that things can look lopsided or bigger than usual because they are just rendered weird in acrobat (or your PDF viewer of choice). Try adjusting the zoom and see if the display changes, also see if it prints correctly.
I have also found that like James suggested, I need special css just for the document. The CSS could be as odd as making one side of the div have a 1px larger border to make it look correct. Also keep in mind that although you view PDFs on the screen it is still a "print" media. PT means 1/72 of an inch which will look bigger when you scale from your 19+ inch monitor (which is further effected by your pixel resolution) to an 8.5" x 11" piece of paper that doesn't truly know what a pixel is. You may need to try adjusting your font size on the fly, something like: font-size: #fontSize-2#pt;. Change -2 to anything that may work for your output. You could also try using a unit that scales, like em.
The cfdocument docs list all the CSS that is supported as well as identify some restrictions. It does not appear that line-spacing:normal; is supported. Also make sure all your CSS is included inline or in a style tag but avoid using a linked .css file. I see you're doing that, just adding tips and pointers.
Also, according to the docs:
ColdFusion does not return HTML and CFML outside of
the <cfdocument></cfdocument> pair.
That means ColdFusion is processing your cfset statements but it does not return
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Create PDF</title>
</head>
and
<script type="text/javascript">
window.open('http://linktopdf/mypdf.pdf','newWin','resizable=1');
</script>
</html>
So it is possible that iText isn't rendering it as you would expect because
It does not have a doctype
It is an ill-formed HTML document
Related
I have a cfcontent tag exporting an excel spreadsheet, and I am are trying to place a logo on top of the excel spreadsheet.I have tried displaying the logo with an image tag, a cfimage tag, and none of the tags display the image on the spreadsheet. The output of the spreadsheet just displays the image as "The linked image cannot be displayed. The file may have been moved, renamed, or deleted. Verify that the link points to the correct file and location". The image is not in the root directory. Is there any other way to display/export an image on a cfcontent
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
<!--table
page
{mso-page-orientation:landscape;}
-->
</style>
</head>
<body>
<img src="images/Logo.jpg" />
#TheVaribleforExcelOutput#
</body>
</html>
Not sure if this is your answer, but an Excel spreadsheet is going to be a standalone file. There's no "host" associated with it. So if you want an extermal resource attached to it you will need an absolute path as in:
<img srce="http://myexample.com/images/logo.jpg">
Not sure that will work, but give it a shot. I seem to remember something similar in the distant past. :)
This will do it http://help.adobe.com/en_US/ColdFusion/9.0/CFMLRef/WSc3ff6d0ea77859461172e0811cbec22c24-796e.html
First we read the image and then have it placed in an image output i.e. in an image source.
<cfscript>
myImage=ImageRead("http://www.google.com/images/logo.gif");
ImageWrite(myImage,"google-logo.gif");
</cfscript>
<p>This image has been downloaded by ColdFusion:</p>
<img src="google-logo.gif">
<p>This is the original image:</p>
<img src="http://www.google.com/images/logo.gif"/>
I am using the "?alttemplate=TemplateName" on the end of my url within my umbraco xslt code
Here is the example: Click here
When a user clicks on the link a popup ( fancybox ) will trigger with the appropriate content rendering inside.
This pop up is working perfectly - the only issue is that the template associated to the node within umbraco has a RTE ( Rich Text Editor ). The content I input within the RTE is not displaying which is very weird because I have the umbraco field select item on the "CommunityVideo" template.
Theoretically the content should render but it's not.
Here is the code that populates the content:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><umbraco:Item field="pageName" runat="server" /></title>
<link rel="stylesheet" href="/css/main.css" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
</head>
<body id="popup">
<div id="comm-video-wrap">
<umbraco:Item field="bodyText" runat="server" />
</div>
</body>
Any ideas?
There are a bunch of unlikely reasons.
Firstly you've spelled the alias wrongly on the item - I'm guessing that the name on the doctype is "Body Text" or "BodyText" or "bodyText" - all of which would generate an alias of bodyText - if not that could be the problem.
Secondly is there a stylesheet setting hiding the rendered item - use firebug to check that out.
Using the alttemplate should work - but you need to be sure its running the template that you think it is.
It could be that the is no usable text in the RTE which you can verify by adding the textIfEmpty attribute.
<umbraco:item field="bodyText" textIfEmpty="There is no commentary text" runat="server" />
There are other umbraco:item attributes that might help with debugging, try adjusting your umbraco:item statement to:
<umbraco:item field="bodyText" insertTextBefore="**BEFORE**" insertTextAfter="**AFTER**" htmlEncode="true" textIfEmpty="There is no commentary text" runat="server"/>
and if you can't see any text then the template you think is being run simply isn't.
Another possibility is that your Template name isn't exact (casing and all). Is fancybox doing an AJAX call to get the page? Is it getting the markup from above in the response or is it blank?
I have an unordered list and each item is a sentence. I would like to highlight a word or two within the sentence but the font color tag
<font color="CC9966">highlighted words </font>
generates an error. Can anyone please suggest a fix for this? I have tried putting it in
<li> </li>
and while it works and generates no error, but this is not the formatting I want as I have a roll over on the li in my CSS style sheet. Thank you.
Wrap a span around the word you want to highlight. It would probably be easier to make a class in the CSS called highlight and use that though.
<span style="color:#DD0000">wordToHighlight</span>
You can check a documents validity by using the W3C Markup Validator. These are the people that make the rules. If you change the tab to validate by direct input and put in:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>test</title>
</head>
<body>
<ul>
<li>this is a <span style="color:#FF0000">test</span> sentence</li>
</ul>
</body>
</html>
You will see that a span in a li is valid markup.
I was trying to run this code, and browser ask me to download pdf file which is good, But it was not loading remaining HTML code or you can say I could not see "Thank you Message".
Am I doing something wrong or missing something?
Need your help
<cfheader name="content-disposition" value="attachment; filename=134.pdf"/>
<cfcontent type="application/pdf" file="#ExpandPath( './134.pdf' )#"/>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Download Now</title>
</head>
Thank you for your interest in downloading
this file. Your download should begin shortly.
Maybe show the 'download will begin shortly' message first as a distinct page, which then redirects (JavaScript or meta tag...) to the .cfm that generates the PDF.
What you're trying to do is load the PDF file immediatly. As stated before you should have a basic HTML Page:
<html>
<head>
<meta http-equiv="refresh" content="2;url=getpdf.cfm?file=123.pdf">
..rest of head
</head>
<body>
Download will begin shortly.
</body>
</html>
This getpdf.cfm?file=123.pdf will be
<cfheader name="content-disposition" value="attachment; filename=134.pdf"/>
<cfcontent type="application/pdf" file="#ExpandPath( './134.pdf' )#"/>
The reason it wont work, is that you browser reads the "headers" and will basically see the file as a PDF file. Like you were downloading a ".pdf". Now you're putting one step in between and let the browser redirect to the PDF download.
As a simple example of the problem:
<cfsavecontent variable = "pageOutput">
<cfoutput>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>#page_title#</title>
</head>
<body>
<cfdump var="#URL#">
</body>
</html>
</cfoutput>
</cfsavecontent>
I save this page to disk. Then when I call this newly-generated page via the following URL:
http://blah/products.cfm?search_keyword=bathroom&search_category=451&search_province=Auckland
The dump doesn't display the newly-passed url vars.
I'm obviously missing something pretty basic here.
What you need to do is replace the opening or closing portion of the tag so that when it gets output you have a valid tag. Something like this:
<cfsavecontent variable="page">
<cfset sCfO = "<" >
<cfset sCfC = "</" >
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title><cfoutput>#page_title#</cfoutput></title>
</head>
<body>
<cfoutput>#sCFO#</cfoutput>cfdump var="#URL#">
<cfoutput>#sCFO#</cfoutput>cfoutput>
#URL.myMessage#
<cfoutput>#sCFC#</cfoutput>cfoutput>
</body>
</html>
Hopefully that makes sense...
If I understand your explanations correctly, in your generated with cfsavecontent pagevariables are already substituted, so you have the static HTML in products.cfm. Try to open it in editor and review the code.
I have a question: what is the purpose of using cfsavecontent here? What are you trying to achieve? Looks like you may not need it at all, plain ol' CFML should do the job.
I would be more inclined to hide that in a function which would read much nicer in your example you could call dumpVariable(url) and encapsulate that in a function. We actually had to do something similar by parsing custom tags from a database into a render function that used cfmodule for the actual implementation. I was pretty happy with the results and it was much easier to tell what was going on in the code than arbitrary character replacement.