Display jsPDF in browser window - electron

I am just starting to use jsPDF and I think it may actually work (after attempting a zillion different ways to produce PDFs in my Quasar/Electron desktop application that have not worked).
Is there a way to display the PDF in the application window?
this.doc = new jsPDF({
orientation: "landscape",
unit: "in",
format: [4, 2]
})
this.doc.text(this.dogArray[0].dogCallName, 1, 1)
this.doc.save("test.pdf")
That works and I can save the PDF, but I'd also like to be able to display the generated PDF in the Electron browser window. I can console.log out this.doc, and I can display it on the window, but it's just a bunch of string info.
Is there something like doc.view("file.pdf") that can be used? I'm looking through the jsPDF documentation but I'm not seeing what I'm looking for.
I want to be able to see the PDF like the author shows on his Demo Website

Related

Appium Android: How to test pdf displayed inside WebView

In Android, I want to test PDF which contains terms and conditions, but this displayed inside WebView. I am able to switch to WebView, I am using below code.
String strWebContextName = getContexts().stream().filter(ctx -> ctx.contains(“WEBVIEW_”)).findAny().orElse(null);
if (Objects.nonNull(strWebContextName)) {
((AndroidDriver) getBaseMobileDriver()).context(strWebContextName);
}
Then locate the script tag and get the content
#FindBy(xpath = “//script[#type=“text/javascript” and contains(text(),”_init")]")
private WebElement webElementPdfPath;
String htmlCode = (String) ((JavascriptExecutor) getBaseMobileDriver()).executeScript(“return arguments[0].innerHTML;”, webElementPdfPath);
After this I don’t know how to proceed? Please help
In my experience with verifying PDF's in a WebView is that there is only limited you can search for with selectors. I'm used to only class or type attributes of the PDF container. I have never been able to search for specific text in an PDF with XPath (PDF's are also not part of the HTML but more an extension which opens the document).
Try a simpler XPath: //script[#type='text/javascript']. This way you know the PDF is opened, but that's all.
I've done this with desktop browsers as well. For browsers, there is no way to identify inner PDF elements, but only limited to: //embed[#type='application/x-google-chrome-pdf']. If I needed to verify the PDF with conditions I've used SikuliX image recognition for instance.

TCPDF Embedded Base64 Encoded Images in HTML String

I have read several posts on this subject but didn't want to piggy-back on any of them with additional questions.
Specifically this post: TCPDF and insert an image base64 encoded
I am generating a PDF from within a custom theme in Wordpress. I'm using TCPDF 6.2.3 (latest stable release, I believe).
I am building this PDF from the same HTML I am using to display on the page. If I embed the full base64 encoded string, it works correctly in the browser, but the image is missing from the PDF.
If I use the "#" method described in the linked post, I get a broken image in the browser (expectedly) but still nothing in the PDF.
All the rest of my HTML markup is rendering in the PDF, images are just not showing.
Is there some other setting or option I need to set in order to get the images to appear in the PDF, and/or can you spot anything I'm doing wrong here? No errors, the images are just not visible in the PDF.
This is how I set the image up:
$imageLocation = $img_root.$imgsrc;
$ext = end(explode(".", $imageLocation));
$image = base64_encode(file_get_contents($imageLocation));
//$response .= "<img src='data:image/$ext;base64,$image'>"; //works in browser but not in PDF
$response .= "<img src='#$image' class='socf_image'>"; //does not work in browser or PDF
And here is the method to create the PDF:
function createPDF($response)
{
// Include the main TCPDF library (search for installation path).
require_once('tcpdf_6_3_2/tcpdf/tcpdf.php');
// create new PDF document
$pdf = new TCPDF(PDF_PAGE_ORIENTATION, PDF_UNIT, PDF_PAGE_FORMAT, true, 'UTF-8', false);
// set document information
$pdf->SetCreator(PDF_CREATOR);
$pdf->SetAuthor('test');
$pdf->SetTitle('test');
$pdf->SetSubject('test');
$pdf->SetKeywords('test');
// set default header data
$pdf->SetHeaderData(PDF_HEADER_LOGO, PDF_HEADER_LOGO_WIDTH, PDF_HEADER_TITLE.' 001', PDF_HEADER_STRING, array(0,64,255), array(0,64,128));
$pdf->setFooterData(array(0,64,0), array(0,64,128));
// set header and footer fonts
$pdf->setHeaderFont(Array(PDF_FONT_NAME_MAIN, '', PDF_FONT_SIZE_MAIN));
$pdf->setFooterFont(Array(PDF_FONT_NAME_DATA, '', PDF_FONT_SIZE_DATA));
// set default monospaced font
$pdf->SetDefaultMonospacedFont(PDF_FONT_MONOSPACED);
// set margins
$pdf->SetMargins(PDF_MARGIN_LEFT, PDF_MARGIN_TOP, PDF_MARGIN_RIGHT);
$pdf->SetHeaderMargin(PDF_MARGIN_HEADER);
$pdf->SetFooterMargin(PDF_MARGIN_FOOTER);
// set auto page breaks
$pdf->SetAutoPageBreak(TRUE, PDF_MARGIN_BOTTOM);
// set image scale factor
$pdf->setImageScale(PDF_IMAGE_SCALE_RATIO);
// set default font subsetting mode
$pdf->setFontSubsetting(true);
// Set font
$pdf->SetFont('helvetica', '', 14, '', true);
// Add a page
$pdf->AddPage();
$html = $response;
$pdf->writeHTML($response, true, false, true, false, '');
return $pdf;
}
Well, fortunately, I was able to figure it out on my own. Perhaps this isn't the best forum for seeking help with this library? If anyone can suggest a better place to get help, I'd appreciate the direction.
Ultimately, the issue was two-fold:
The "#" notation is required for the PDf while the approach is what works for displaying the HTML in browser. So a string replace before creating the PDF solves that.
This is the tricky part. The HTML needs to use double-quotes around the properties, not single quotes. My code was using double quotes for the PHP strings, so the HTML properties were surrounded with single quotes and that was the issue. Swapping the two quote types was the last piece of the puzzle to get the images to appear in the PDF.
Hopefully this will help someone else who is pulling their hair out trying to blindly find their way through this library like me.

Is there any reason the lines of code get copied jointly from the URL?

I've tried to copy some code from an online book - Link here - into my Visual Studio Code, using Ctrl + C. In the book, the code appears in the format I desire to have within my editor:
salaries_and_tenures = [(83000, 8.7), (88000, 8.1),
(48000, 0.7), (76000, 6),
(69000, 6.5), (76000, 7.5),
(60000, 2.5), (83000, 10),
(48000, 1.9), (63000, 4.2)]
However, if I copy it from the previously mentioned URL, the code looks like that in the editor:
salaries_and_tenures=[(83000,8.7),(88000,8.1),(48000,0.7),(76000,6),(69000,6.5),(76000,7.5),(60000,2.5),(83000,10),(48000,1.9),(63000,4.2)]
Also, if I download the file locally and I proceed with copying the code into my editor (from the PDF), the code looks alike the one in the book:
salaries_and_tenures = [(83000, 8.7), (88000, 8.1),
(48000, 0.7), (76000, 6),
(69000, 6.5), (76000, 7.5),
(60000, 2.5), (83000, 10),
(48000, 1.9), (63000, 4.2)]
Does anyone know what is happening behind the scenes? Is there any reason the white-space characters get deleted? (Remark: it is crystal clear that it's not an editor-related issue, because I got the same issue here, when I wrote the post)
As you mentioned yes this is not editor related issue.
As you know pdf files don't store data as plain text. so copy and pasting from them is not exactly like notepad, word, etc.
But the question is why sometimes it removes white spaces and sometimes doesn't?
This is because of your pdf reader. probably you use different pdf readers in the browser and your OS. some pdf readers let you copy white spaces and some don't.
if you want to copy white spaces without downloading pdf just use your OS pdf reader for online reading too (There might be some option about online data source in your pdf reader).

PDFKit header or footer not working

I am trying to add page numbers to each page of pdf generated using PdfKit. The following is my code :
content = File.read( "report.html.erb")
template = ERB.new(content)
set_margin = 0.to_s
kit = PDFKit.new(template.result(binding), :header_center => "Page [page] of [toPage]", page_width: '157.42', page_height: '52.77', :margin_top => set_margin+'in', :margin_right => set_margin+'in', :margin_bottom => set_margin+'in', :margin_left => set_margin+'in')
kit.to_file(file_path)
No header is getting displayed on the generated pdf. Please provide a solution for this.
Please type wkhtmltopdf --help in console. I believe, you have not patched Qt library with wkhtmltopdf fixes, hence you will see at the bottom of output:
Reduced Functionality:
This version of wkhtmltopdf has been compiled against a version of QT without
the wkhtmltopdf patches. Therefore some features are missing, if you need
these features please use the static version.
Currently the list of features only supported with patch QT includes:
Printing more then one HTML document into a PDF file.
Running without an X11 server.
Adding a document outline to the PDF file.
Adding headers and footers to the PDF file.
Generating a table of contents.
Adding links in the generated PDF file.
Printing using the screen media-type.
Disabling the smart shrink feature of webkit.
To print out headers and footers one should rebuild Qt library with patches provided by wkhtmltopdf.

Save current webpage in Watin

I'm trying to save the full content of the current static web page, using the code from Show IE "Save As" dialog using Watin
So here it is:
IE ie = new IE("http://localhost");
// more code
//I expect out.html is the output file
FileDownloadHandler fileDownloadHandler = new FileDownloadHandler("out.html");
//I expect this line to popup the save as dialog box, but nothing happens
ie.AddDialogHandler(fileDownloadHandler);
//the program is blocked at this line, as it can't click anywhere
ie.Link("startDownloadLinkId").Click();
fileDownloadHandler.WaitUntilFileDownloadDialogIsHandled(15);
fileDownloadHandler.WaitUntilDownloadCompleted(200);
I also tried the code below, but it doesn't save all the page:
System.IO.StreamWriter file = new System.IO.StreamWriter("output.html");
file.Write(ie.Html);
Again, I need to save the webpage from Watin, and the result to be the same as saving it manually.
Thanks!
Here is how I do it:
File.WriteAllText("myfile.html",
(myIE.InternetExplorer as SHDocVw.InternetExplorer).Document.documentElement.outerHtml);
Assumes myIE is a WatiN IE element, of course.
If you're ever having difficulty finding how to do something with WatiN, I often find it helpful to google how to do it with an "Internet Explorer COM object". WatiN wraps the object, but it is exposed and able to be accessed!
Cheers!
Try to parse the html with html agility pack and save it, there are additional abilities that you can use...
using HtmlAgilityPack;
var htmldoc = new HtmlDocument();
htmldoc.LoadHtml(ie.Html);
htmldoc.Save(stream);
Link to agility pack

Resources