I am generating a pdf document using react-native-html-to-pdf.
When the document contains a long list of elements it is possible for some elements to span two pages within the same document.
For example this simple html:
<html>
<head></head>
<body>
<section style="border:solid 1px black;"><p>item</p></section>
<!-- sections repeat 32 times omitted for brevity -->
</body>
</html>
I get a document that looks like this at the page break:
How can I control this? Does it depend on the html elements in the document?
Related
I am trying to decorate my background of my website I am building and for some reason I can put one or the other by themselves work but when I add both lines then only the top one works. How can I make both lines work together.
<body style=background-color:powderblue>
<body style=border-style:solid;border-color:red>
You can only have one <body> tag.
<body style="background-color:powderblue;border-style:solid;border-color:red">
Combine the styles into one, or move the styles to a css file or <style> block in your <head>
body {
background-color:powderblue;
border-style:solid;
border-color:red
}
I'm using latest Selenium Firefox (2.53.0)
Previously code was working when performing the following
1) Finding the iFrame by Xpath iframe class
IWebElement detailFrame = `Driver_Lib.Instance.FindElement(By.XPath("//iframe[#class='cke_wysiwyg_frame cke_reset']"));`
2) Switching to that frame by
Driver_Lib.Instance.SwitchTo().Frame(detailFrame);
3) finding the p tag within the iFrame by
IWebElement freeText = Driver_Lib.Instance.FindElement(By.TagName("p"));
4) Inserting a simple string to the iframe text box
freeText.SendKeys("this is some text");
5) switching from the iFrame back to the main contentwindow by
Driver_Lib.Instance.SwitchTo().DefaultContent();
Here is the code part from the application
<iframe class="cke_wysiwyg_frame cke_reset" frameborder="0" src="" style="width: 100%; height: 100%;" title="Rich Text Editor, ctl00_ctl00_MainContentPlaceHolder_PageContent_mlcEditor_CKEditor" aria-describedby="cke_61" tabindex="0" allowtransparency="true">
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title data-cke-title="Rich Text Editor, ctl00_ctl00_MainContentPlaceHolder_PageContent_mlcEditor_CKEditor">Rich Text Editor, ctl00_ctl00_MainContentPlaceHolder_PageContent_mlcEditor_CKEditor</title>
<style data-cke-temp="1">
<link href="https://myUrl/contents.css" rel="stylesheet" type="text/css">
<style data-cke-temp="1">
</head>
<body class="cke_editable cke_editable_themed cke_contents_ltr cke_show_borders" contenteditable="true" spellcheck="false">
<p>
<br _moz_editor_bogus_node="TRUE">
</p>
</body>
</html>
</iframe>
The test I am running is a simple one, open up that page, insert some text, save.
It not inserting the text into the iFrame. I am totally puzzled as to why.
Has anyone else found this issue at all?
Many thanks
I have removed the exception, this was a redHerring.
the iFrame can not have text entered into it
hi all I've found the solution:~ here is the summary of what was happening:
1) The iFrame was being located by xPath.
2) the SwitchTo() method used placed focus in the detailFrame instance of IWebElement
3) What was not happening was the p tag could not be located as it was contained withing a CSS Body Class that.
The solution was staring me in the face the whole time! so simple!!
I did this:
IWebElement detailFrame = Driver_Lib.Instance.FindElement(By.XPath("//iframe[#class='cke_wysiwyg_frame cke_reset']"));
Driver_Lib.Instance.SwitchTo().Frame(detailFrame);
IWebElement freeText = Driver_Lib.Instance.FindElement(By.TagName("body"));
freeText.SendKeys("This is a free text question created by Automation Smoke Test");
Driver_Lib.Instance.SwitchTo().DefaultContent();
So as you see, simply locating the 1st instance of the body tag!
I have big trouble with "Combined Fonts" (Japanese & English).
I have to create a PDF document from HTML content which is shown in my website. For that I have used <cfdocument> and implemented the PDF from the HTML content. But my content includes both Japanese & English content and which is appear in a different font in the created PDF than what is on my website. The issue occurred only in the case of combined Japanese & English section.
The requirement is:
For English content, the font should be Verdana.
For Japanese content, the font should be Simson.
I have implemented the same with Korean, Chinese, French and it's working.
For outputting the special characters, I have added <cfprocessingDirective pageEncoding="utf-8"> above the code. But I still get weird font for the contents in both English and Japanese.
The code I have tried is given below,
<cfcontent type="application/pdf">
<cfheader name="Content-Disposition" value="attachment;filename=test.pdf">
<cfprocessingdirective pageencoding="utf-8">
<cfdocument format="PDF" localurl="yes" marginTop=".25" marginLeft=".25" marginRight=".25" marginBottom=".25" pageType="custom" pageWidth="8.5" pageHeight="10.2">
<cfoutput>
<?xml version="1.0" encoding="UTF-8"?>
<!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>PDF Export Example</title>
<style>
body { font-family: Verdana; }
h1 { font-size: 14px; }
p { font-size: 12px; line-height: 1.25em; margin-left:20px;}
</style>
</head>
<body>
<h1>PDF Export Example Combined Japanese & English</h1>
<p>This is an japanese with english example
日本人は単純な音素配列論で膠着、モーラ·タイミングの言語、純粋な母音システム、
音素の母音と子音の長さ、および語彙的に重要なピッチアクセント。語順は通常、粒子が言葉の文法的機能をマ
ーキング対象オブジェクトと動詞であり、文の構造は、トピック·コメントです。文末粒子は、感情的または強調の影響を追加したり、
質問を作るために使用されます。名詞は文法的に番号や性別を持たず、何の記事はありません。動詞は主に緊張し、音声ではなく、
人のために、コンジュゲートされる。形容詞の日本の同等物は、また、結合している。日本人は動詞の形や語彙、話者の相対的な地位、
リスナーおよび掲げる者を示すと敬語の複雑なシステムを持っています。This is an example.
</p>
<h1>PDF Export English Example</h1>
<p>This is an example.
</p>
</body>
</html>
</cfoutput>
</cfdocument>
What else should I do to fix this problem?
Thank you.
As per the results I have got and research, I have found that there is an issue with PDF style rendering for English with Japanese content.
So finally I found a solution,
Apply space between the Japanese and English words.
Iterate the whole string (list with space delimiter)
Then It is possible to differentiate the English words from the Japanese words by Regular expression
Apply separate style for English words by wrapping them by span (or any) tag.
I don't know whether this is the proper solution for this issue. This is what I have done for solving the issue.
I'm trying to add id to a element using dojo.query. I'm not sure if it's possible though. I trying to use the code below to add the id but it's not working.
dojo.query('div[style=""]').attr("id","main-body");
<div style="">
content
</div>
If this is not possible, is there another way to do it? Using javascript or jquery? Thanks.
Your way of adding an id to an element is correct.
The code runs fine for me in Firefox 17 and Chrome 23 but I have an issue in IE9. I suspect you may have the same issue.
In IE9 the query div[style=""] returns no results. The funny thing is,it works fine in compatibility mode!
t seems that in IE9 in normal mode if an HTML element has an inline empty style attribute, that attribute is not being preserved when the element is added to the DOM.
So a solution would be to use a different query to find the divs you want.
You could try to find the divs with an empty style attributes OR with no style attribute at all.
A query like this should work:
div[style=""], div:not([style])
Take a look at the following example:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Page</title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/dojo/1.8.2/dojo/dojo.js"></script>
<script type="text/javascript">
dojo.require("dojo.NodeList-manipulate");//just for the innerHTML() function
dojo.addOnLoad(function () {
var nodeListByAttr = dojo.query('div[style=""], div:not([style])');
alert('Search by attribute nodeList length:' + nodeListByAttr.length);
nodeListByAttr.attr("id", "main-body");
var nodeListByID = dojo.query('#main-body');
alert('Search by id nodeList length:' + nodeListByID.length);
nodeListByID.innerHTML('Content set after finding the element by ID');
});
</script>
</head>
<body>
<div style="">
</div>
</body>
</html>
Hope this helps
#Nikanos' answer covers the query issue, I would like to add, that any query returns an array of elements, in case of Dojo it is dojo/NodeList.
The problem is you are about to assign the same id to multiple DOM nodes, especially with query containing div:not([style]). I recommend to use more specific query like first div child of body:
var nodes = dojo.query('body > div:first-child');
nodes.attr("id", "main-body");
To make it more robust, do not manipulate all the nodes, just the first node (even through there should be just one):
dojo.query('body > div:first-child')[0].id = "main-body";
This work also in IE9, see it in action: http://jsfiddle.net/phusick/JN4cz/
The same example written in Modern Dojo: http://jsfiddle.net/phusick/BReda/
With StringTemplate, what is the proper way to have a standard layout template such as:
<head>
..
</head>
<html>
$body()$
</html>
Where I can set the body template from my application, so that every template I use uses this fundamental layout?
Thanks.
I found it hiding in the documentation:
http://www.antlr.org/wiki/display/ST/StringTemplate+2.2+Documentation
"Include template whose name is
computed via expr. The argument-list
is a list of attribute assignments
where each assignment is of the form
attribute=expr. Example
$(whichFormat)()$ looks up
whichFormat's value and uses that as
template name. Can also apply an
indirect template to an attribute."
So my main layout template now looks like this:
<head>
<title>Sportello</title>
</head>
<html lang="en-US">
<body>
$partials/header()$
<section>$(body_template)()$</section>
$partials/footer()$
</body>
</html>
...to which I pass the subtemplate's name as an attribute.