I have an Angular JS single-page application used for reporting. I would like to print the report as rendered client-side to PDF format, taking into consideration certain elements users may have dynamically shown or hidden.
Is there anyway to achieve this?
Add class to div no-print
and css,
#media print {
.no-print{
display:none;
}
}
and print using,
javascript:window.print()
Related
Is there a way to send a print command to my printer for printing a tabular data in react js. Sorry if the question sounds silly because I am new to this. Thanks in advance.
Call window.print() function.
print(){
window.print();
}
call this function when you want to print your current screen or component
Triggering the browser's native print behavior is quite simple: just call a window.print() in your code.
Then your page will be printed as it is, so commonly you should provide a CSS spefic for the print media.
You have two way:
add a separate CSS like <link rel="stylesheet" href="css/style.css"/>
include a #media print in your existing CSS:
#media print {
…
}
What you should put inside your CSS? Whatever you need to fix your styles, commonly a lot of display: none rules to hide elements you don't want to print.
Final thoughts:
print from HTML is not much cross-browser: some browsers print better than other
printing HTML tables is full of caveats, for example take a look at: Repeat table headers in print mode
Here's the background:
I want to be able to save rich text blog posts to Firebase to then display them, including code snippets, on a Posts page.
Right now, I'm simply saving a single string of html to Firebase, retrieving that per post, and setting it with dangerouslySetInnerHtml. I'm the only one adding posts.
However, this means that I lose tabbing information when displaying code snippets in blocks. I don't think I can use solution since I'm using dangerouslySetInnerHtml: Formatting code with <pre> tag in React and JSX
Any tips on how to store, retrieve, and display rich text using React and Firebase? Thank you for your help.
I was able to use the following to convert rich text to html, and then minify it:
https://4html.net/Online-HTML-Editor-Text-to-HTML-Converter-870.html
http://minifycode.com/html-minifier/
I want to show PDFs in my angular application. It should be possible to show multiple pages at once and to search inside the PDF.
I tried angularjs-pdf to do so, but it lacks these features. Is there a angular wrapper for pdf.js that can do this? Or can somebody get me startet on how to implement pdf.js in my angular application without a wrapper?
Assuming this statement:
"I want to show PDFs in my angular application"
Anyone searching for this, could ought to check out ng2-pdf-viewer, for more information on this module, can check this out ng2-pdf-viewer PdfShowcase
Basically, this module could somewhat allow one to display more than one PDF in a single screen.
app.component.ts
// Declare the pdf as an empty array
pdfs = [];
// Assuming requesting PDFs from server through MVC style
getPdfs(){
this.getPdfService.getPdfs().subscribe(response => {
response.body.forEach((value, index) => {
this.pdfs.push({
id: index,
obj: window.URL.createObjectURL(value);
});
});
});
}
app.component.html
<div *ngFor="let pdf of pdfs, index as i;">
<div *ngIf="pdf[i]">
<pdf-viewer
[rotation]="0"
[original-size]="true"
[show-all]="true"
[fit-to-page]="true"
[zoom]="0"
[zoom-scale]="'page-width'"
[stick-to-page]="true"
[render-text]="false"
[external-link-target]="'blank'"
[autoresize]="true"
[show-borders]="true"
[src]="pdf.obj"
(after-load-complete)="onPdfComplete($event)"
(error)="onPdfError($event)"
style="width: 100%; height: 800px;">
</pdf-viewer>
</div>
</div>
If this library is not suitable for your use case, you may try with other libraries which uses iframe or similar strategy. Refer here is a useful source worth checking it out.
I know I'm a little bit late for this post but thought of posting here might help some folks who is looking for the same thing. Hope it helps.
From ng2-pdf viewer page, it recommends your desire "angular wrapper for pdf.js", There are a ton of built in functionality Mozilla's viewer supports; such as print, download, bookmark, fullscreen, open file, zoom, search,......
If you need to display multiple PDF files simultaneously and if you don't mind using iFrames, I recommend ng2-pdfjs-viewer. https://www.npmjs.com/package/ng2-pdfjs-viewer
I'm wondering how to render responsive pages using PhantomJS in pdf format.
I have tried so many responsive pages and found that it is printing the pdf using the print css.
So, if the page includes the print css OR screen only css it will render the pdf same as we found via print command preview (Ctrl + p).
Is there any way OR script by which i can get the pdf as I'm seeing them on web browser?
Attaching the file when i tried to get the pdf from http://getbootstrap.com/examples/jumbotron/.
Also the main issue is not responsive designes, the issue is print css applied over them.
example pdf
jorupp came up with a javascript solution in this gist. It essentially let's you "lock" all the media queries in the document's stylesheets to whatever applies presently, before changing to print mode.
In case the link ever disappears, here's the code:
function process(rule) {
if(rule.cssRules) {
for(var i=rule.cssRules.length-1; i>=0; i--) {
process(rule.cssRules[i]);
}
}
if(rule.type == CSSRule.MEDIA_RULE) {
if(window.matchMedia(rule.media.mediaText).matches) {
rule.media.mediaText = "all";
} else {
rule.media.mediaText = "not all";
}
}
return rule;
}
for(var i=0; i<document.styleSheets.length; i++) {
process(document.styleSheets[i]);
}
This is quite tricky since there is no option to tell PhantomJS to use the screen when rendering as PDF.
You would need to
load all the linked stylesheets that contain a print block with __utils__.sendAJAX,
remove #media print block (this is quite hard with regex because you need to look out for balanced braces, but relatively easy with plain JS),
maybe you even need to rename #media screen to #media print,
remove the linked stylesheet from the document and
add a style element which has the manipulated stylesheet inside (preferable in the same place as the previous stylesheet) to the DOM.
Your page won't look good, because you usually have page breaks and the like with pdf. Also, page width and viewport width are quite hard to get right. Changing the page width doesn't change the viewport, so it won't be the proper responsive that would have with a pixel perfect png. But that is only a solution if you don't need selectable text.
I have a requirement to print the View model data using Print Button.
Currently i have a div and assigning my view content to it. This div has been already added in backbone region. In my javascript function, i am just setting the viewmodel content to the printdiv and it working with out any issue.
But the content which i have added for printing is getting appended in the browser HTML also, I dont want to show that in my browser. I tried setting visible hidden and display none to my printingdiv. but then printing is not working since the content is not visible
CSHTML:
<div id="printdiv"/>
JS:
Myapp.printdiv.show(viewData.view);
window.print();
Init.JS
Myapp.addRegions({
printdiv: '#printdiv',
});
Please help me to resolve this issue
Thanks
The best way to handle this sort of problem is with a print-specific stylesheet. This article explains how to do that in detail, but the short version is that you define your non-print styles as normal, then use CSS code like the following to override print-specific styles:
#printdiv {
display: none
}
#media print {
#printdiv {
display: block;
}
}