I am using rasterize.js to generate a PDF document out of a local html file, containing text and images. The text appears just fine, but the images are ignored in the final PDF. I am including images as html img tags. e.g.
<img src="signature.png" alt="Sign" border="0" >
Try increasing the timeout. Default from the examples is only 200ms so see what happens when this is 2 seconds, e.g.
window.setTimeout(function () {
page.render(output);
phantom.exit();
}, 2000);
Related
I created a document file from word and has exported as pdf . i want to show the pdf content inside the Div element in razor page. How can I show the pdf content from razor page. Please can you provide an example code how to show in blazor server side
If you stored your pdf file directly in your documents for example in the folder wwwroot/pdf.
wwwroot/pdf/test.pdf
You can display this PDF with this line of html bellow :
< embed src="pdf/test.pdf" style="width=100%; height=2100px;" />
It will provide you a pdf displayer with printing options !
If you want to go further, upload your file and then display it, I will recommend you to go check this explanation :
https://www.learmoreseekmore.com/2020/10/blazor-webassembly-fileupload.html
The upload for PDF files works the same as Img file, you need to go check IBrowserFile documentation.
You will see that it has a Size obj and a OpenReadStream() function that will help you get the display Url for your file (image or pdf)
If the site abow closes, this is the upload code that is shown on it :
#code{
List<string> imgUrls = new List<string>();
private async Task OnFileSelection(InputFileChangeEventArgs e)
{
foreach (IBrowserFile imgFile in e.GetMultipleFiles(5))
{
var buffers = new byte[imgFile.Size];
await imgFile.OpenReadStream().ReadAsync(buffers);
string imageType = imgFile.ContentType;
string imgUrl = $"data:{imageType};base64,{Convert.ToBase64String(buffers)}";
imgUrls.Add(imgUrl);
}
}
}
This code was written by Naveen Bommidi, author of the blog where I found this usefull code
If you want, as I said, upload a PDF and then display it.
You can use the same html line :
< embed src="#imgUrl" style="width=100%; height=2100px;" />
And your uploaded files will be displaying.
Example
I am working on dynamic HTML to PDF document and using ckeditor to write HTML and then itextsharp 5.5.10 to generate downloadable PDF from it. Below is the code I am using
string htmlText = "some basic HTML I wrote in ckeditor 4.0 and save in my DB to retrieve later"
StringReader sr = new StringReader(htmlText);
Document pdfDoc = new Document(PageSize.A4, 0, 0, 0, 18f);
PdfWriter writer = PdfWriter.GetInstance(pdfDoc, Response.OutputStream);
// instantiate the custom PdfPageEventHelper
MyPageEventHandler e = new MyPageEventHandler()
{
ImageHeader = imageHeader
};
writer.PageEvent = e;
pdfDoc.Open();
XMLWorkerHelper.GetInstance().ParseXHtml(writer, pdfDoc, sr);
pdfDoc.Close();
// Auto Download option
Response.ContentType = "application/pdf";
Response.AddHeader("content-disposition", "attachment;filename=Proposal-" + pid + ".pdf");
Response.Cache.SetCacheability(HttpCacheability.NoCache);
Response.Write(pdfDoc);
Response.End();
Now everything is working fine, thanks to this great library itextsharp however sometimes its not adding few images to PDF file.
During debugging I found that variable htmlText has same input HTML that I saved using ekeditor and it contains all img tags too but still some images are not showing up in PDF.
Below are few tags in my HTML
<img alt="" src="http://www.mydomain/fullpath/13101571jjc-banner.png" />
<img alt="" src="http://www.mydomain/fullpath/0c1bc6fbchart-1.png" style="width:400px" />
<img alt="" src="http://www.mydomain/fullpath/f7802520graph1.png" style="height:288px; width:643px" />
<img alt="" src="http://www.mydomain/fullpath/4cd70c03sample_s-l_DISTRIBUTION.jpg" style="height:756px; width:1056px" />
and 4th image is not showing up in my PDF.**
I understand that it may have something to do with Height and Width attribute on img tag but I am not able to solve it.
Note : image show up properly when I remove either Height or Width or both attributes from img tag. But actual user using my code won't do that every time they add a new image in HTML so I am looking for a proper solution here.
Thank you in advance for any suggestion and solution.
On one hand the style attribute of your problem image looks like this:
style="height:756px; width:1056px"
On the other hand you use an A4 sized document
Document pdfDoc = new Document(PageSize.A4, 0, 0, 0, 18f);
and an A4 page has a width of about 8.27in which at 96px per inch are about 794px.
Thus, an A4 page simply is not width enough for a 1056px wide image!
So to accommodate the image you can either
change the document size to something wider, or
before feeding the HTML into iTextSharp apply a preprocessing step which checks it for inappropriate attribute values and fixes them, or
change the HTML generation process to not produce such inappropriate attribute values to start with.
In an additional comment you asked
What should be the max-width and max-height of an image in order to get it printed correctly?
Considering that you explicitly set the left, right, and top margin to 0 and the bottom margin to 18 user units (by default a user unit is a 1/72 in), the maximum image width will likely be about 794px and the maximum image height about (1122 - 18 * 96 / 72)px = 1098px. To be sure subtract yet another few pixels.
This of course depends on your HTML not adding additional margins or cell borders or whatever around the image...
I am trying to create a pdf from a webpage using phantomJS. I want the pdf to just be a single page long that is the same height as my webpage. If I don't set paperSize or viewportSize at all then it creates a page that is almost the right height, it is just a little short by about 100px. If I detect page height and use that to set viewportSize I have the exact same problem, it's short by about 100px. Is there a way to get phantomJS to just create a pdf based on the webpage's size? I want it to be exact because the page is a dark colour and it looks really bad to have a big white block at the end of the page (which is what is there if I add a constant to viewport height to make it fit everything in one page).
My code to find height(Note: the height is the same whether I use body or the classname below to find it):
var size = page.evaluate(function() {
var height = $('.export-athlete-detail-report').outerHeight(true);
return {width: 700, height:height};
});
page.paperSize = size;
page.render(reportFile);
I am using to this slider on my website: http://flickity.metafizzy.co
The images load in squashed, but on refresh it sometimes appear as it should. I have decreased the images size, because I thought perhaps it was a loading issue, but that didn't help. I then added imagesLoaded, and that also did nothing.
I've attached a screenshot of how the images load. thanks!
Check that you are using flickity.pkgd.js and not just flickity.js.
Check that your option is set correctly
// with jQuery
$('.gallery').flickity({
imagesLoaded: true
});
-
// or with vanilla JS
new Flickity( '.gallery', {
imagesLoaded: true
});
-
<!-- or in HTML -->
<div class="gallery js-flickity" data-flickity-options='{ "imagesLoaded": true }'></div>
I'm trying to print a PDF file from my Windows 8 app to connected printer. I'm coding with WinJS, and know that I have to create a print task to initiate printing from a Windows 8 app. So, after reviewing the documentation, I have this code:
onPrintTaskRequested: function (e) {
var self = Application.navigator.pageControl,
printTask = e.request.createPrintTask("Print Test Doc", function (args) {
args.setSource(MSApp.getHtmlPrintDocumentSource(document));
// Register the handler for print task completion event
printTask.oncompleted = self.onPrintTaskCompleted;
});
}
According to the documentation, the MSApp.getHhtmlPrintDocumentSource method accepts a specific set of data types. As stated in the documentation:
This can be the root document, the document in an IFrame, a document
fragment, or a SVG document. Be aware that htmlDoc must be a document,
not an element.
Apparently I cannot simply set the argument for getHtmlPrintDocumentSource to a .PDF or .PNG binary. So, I'm curious: does the WinJS library offer a method for printing so that I can implement the printing of a PDF file to a connected printer? Can anybody offer some tips to implement?
After trial and error, I was finally able implement the printing of a Base64 stream representing a PDF binary from a Windows 8 application.
I'm coding the app in HTML / CSS / WinJS. Essentially here is a brief explanation of how it was accomplished:
Create a new <canvas> element within the default.html file. Place it right after the open tag of the element. Like this:
<body role="application" class="app">
<canvas id="pdf-render-output"></canvas>
.
.
.
</body>
Then inside the default.css file, setup a few rules as well as a print media query. Like this:
body > canvas {
display: none;
}
.
. /* all your app's default css styles */
.
#media print {
body > * {
display:none;
max-width: 100%;
}
html {
max-width: 100%;
border-top-color: none;
border-top: 0;
}
body > canvas {
display: block;
border: none;
max-width: 100%;
width: 100%;
height: 100%;
position: relative;
}
}
Of note is the order in which the rules are declared in CSS. It's important to place the print media query after declaring default CSS rules.
After this is setup, javascript handles the rest. The basic idea is to render the PDF.js output to the "hidden" canvas in the DOM. When the document object gets sent to print, the CSS print media declaration is queried so that all elements under <body> are hidden except for the canvas element. Here is the javascript to print only the first page in the PDF:
//Define a container for the Base64 data we'll use with PDF.js
var pdfPrintData = {};
//Function to render PDF to canvas and begin printing contract with Windows 8 OS
printPrescription: function () {
var self = Application.navigator.pageControl,
printManager = Windows.Graphics.Printing.PrintManager.getForCurrentView();
self.getPDF().done(function () {
var pdfStream = pdfPrintData.base64,
pdfFile = convertDataURIToBinary(pdfStream);
PDFJS.disableWorker = true;
PDFJS.getDocument(pdfFile).then(function (pdf) {
var numPages = pdf.numPages,
renderCanvas = $('#pdf-render-output')[0];
//setup canvas
renderCanvas.height = pdf.getPage(1).data.getViewport(1).height;
renderCanvas.width = pdf.getPage(1).data.getViewport(1).width;
//Setup a render context for pdf.js to out a pdf file to the canvas.
var renderContext = {
canvasContext: renderCanvas.getContext('2d'),
viewport: pdf.getPage(1).data.getViewport(1)
};
//Bring up Windows 8 OS print after PDF is rendered to render context.
pdf.getPage(1).data.render(renderContext).then(function () {
printManager.onprinttaskrequested = self.onPrintTaskRequested;
Windows.Graphics.Printing.PrintManager.showPrintUIAsync();
});
})
});
},
onPrintTaskRequested: function (e) {
var self = Application.navigator.pageControl,
printTask = e.request.createPrintTask("Print Prescription", function (args) {
args.setSource(MSApp.getHtmlPrintDocumentSource(document));
printTask.oncompleted = self.onPrintTaskCompleted;
});
},
onPrintTaskCompleted: function (e) {
if (e.completion === Windows.Graphics.Printing.PrintTaskCompletion.failed) {
console.log("[ERX] : Failed to print!");
}
}
The self.getPDF method is just a function that retrieves the Base64 data stream, and that streams gets set on the .base64 property of the global pdfPrintData object. For some reason, I was not able to render the pdf using pdf.js to a dynamically create canvas in a dynamically created document. I had to render the output of the pdf.js render method to a canvas already present in the DOM.
As far as I know, MSApp.getHtmlPrintDocumentSource(document) is meant to be used with HTML document objects, and nothing else.
If you can assume Windows 8.1, you can try to assemble a new HTML document from your PDF file by exporting each page into a raster image using PdfPage.RenderToStreamAsync. There is a sample project in MSDN for a PDF viewer that uses this new API where you can learn how to use this method.
If you cannot assume Windows 8.1 and you need to support plain Windows 8 or Windows RT (ARM), you might need to use a third party library to create the raster images or to do the printing all together.
Amyuni PDF Creator for WinRT for example can do the printing for you. Disclaimer: I currently work for the company that develops the library