I have created a html page with bootstrap control and my own css. I am running the page through visual studio in chrome. I want this page to get converted into pdf with colours as it is displayed in chrome. I have not connected any printer to my system. If i give ctrl+P, my page is getting displayed without colours.
I have used 'save as pdf' extension of chrome for conversion.
It is saying 'cant access your local url'. Is there a way to print the page in the same way as it is seen in browser as a pdf
Bootstrap controls like progress bar not getting appeared in print.
Chrome “Save As PDF” works fine. You need to tick the “print background graphics” checkbox otherwise by default backgrounds are ignored.
However, the problem is that Bootstrap has included a reset for print media. What it does is to overwrite all background to white and foreground color to black, with !important.
What kills is the !important
I would recommend you to use one of the free online HTML-to-PDF conversion solutions.
Here's one for example: http://www.htmlpdf.com/
Keep in mind that some solutions may not give you the expected results. In this case just try another.
After you have found a working solution, just print the converted-HTML-to-PDF file that you downloaded.
Chrome itself acts as a pdf writer and reader, as we already know. I'm not sure why the colours are missing in the preview for printing, still, give this a try:
After Ctrl+P, you'll see the Print - Cancel options, below which there is a Destination for you to choose.
It has Recent, Local and Cloud destinations with a choice from the local ones being displayed. Go ahead and change it to Save as pdf.
Now you can save the whole webpage with the colours too.
Take a look at this
I had the same issue but found an easy solution.
Simply get the google chrome extension called : FireShot
Get it here: https://chrome.google.com/webstore/detail/take-webpage-screenshots/mcbpblocgmgfnpjjppndjkmgjaogfceg?hl=en
It will take full page screenshot of your HTML page and even local Html pages.
Then capture the full page.
After it will lead you to a new page with saving option.
Beside “Email” I suggest you to click on “PDF”. Then it will lead you to Gmail so you can send yourself the PDF.
I don’t suggest to click on print, because in my case when I saved it, there was an issue with the pixels.
Very easy.
GoFullPage - Full Page Screen Capture — works great for this case.
Related
I occasionally save tutorials from a website as a PDF file for future reference.
My current manual workflow is:
Click the "show on one page" link to get a full single page view of the article.
Open the DevTools of the browser and select sections with advertisements and related links with help of the inspect-functionality and remove them.
Print the page as a PDF file.
I used the Firefox or Chrome-Browser for this, as they both have the required functionality and behave very similarly in that regard.
I noticed that the content I want to remove to get a "clean print" of the content is mostly the same: Let's say all adds are embedded with a div with the class add-banner.
Is there a way to automate these steps?
One idea is to load a custom CSS file that I would need to prepare specifically for a site. Simple rules like .add-banner { display: none; } would allow me to hide the sections that I don't want to print.
I also took a look at console based scrapers because I like the idea to call a command with the URL as a parameter. But the tools I've discovered are image based and I want a indexable PDF file where I can search for text and select parts.
What is the best option to achieve this?
The extension User CSS from the chrome web store (free) allows me to add custom css rules to whatever page is loaded. It is possible to import and export CSS rules and the extension allows to store the custom CSS on a per site base.
This is exactly what I was looking for, since it makes it easier and quicker for me to remove unwanted sections before printing.
Every other website I visit, the inspector works as expected:
But in many of the sites I'm editing within apache server (using xampp) somehow they doesn't show the "filename.css:lineNumber" data
Also, every change I try to do in the inspector in thse sites, doesn't do anything to the code shown in the source tab.
I've tried refreshing, hard refreshing with cache, closing and opening the tab, closing and opening chrome again. The same problem occurs.
In other sites the inspector works well, but not in many of the localhost sites.
Has someone experienced this before? Is there a way to fix this?
If you are using a client-side CSS generator library such as Lea Verou's excellent -prefix-free or client-side Less, you will not see source information as it has all been processed and reinjected as style elements.
Client-side Less has a property [dumpLineNumbers] to include source line info as a comment in the generated source. (I'm not sure if this will display in Chrome's inspector - but I think it might)
The only "fix" I know of for -prefix-free is to temporarily remove it, obtain the source info for reference, then put it back in.
I have had the exact same problem (not using a css generator), and it appears to be a known bug with the current version of Chrome, the solution is to use the more up to date Beta version known as Chrome Canary - Here's the link :)
https://www.google.co.uk/intl/en/chrome/browser/canary.html
Try to check what the format of your CSS file is. I had the same trouble with the UNIX and Macintosh formats. For example, try to open you CSS file in Notepad++ and in the bottom right corner of the window you'll see your current format. If you see UNIX or Macintosh there, click it with the right button of your mouse and change to DOS/Windows. Then save your file and refresh your page in Chrome. It definitely helped in my case.enter image description here
I have a really simple piece of CSS which is applying a background image to <li> elements
.icon-facebook { background: url("./images/icon_facebook.png") no-repeat; }
This works fine when I view it locally, without a web server, i.e. by double-clicking the .html file.
But as soon as I serve the same page via Apache - whether on localhost or a production server - the background images disappear.
Other background images on the page work fine - and all have identical (relative) paths.
Specifying an absolute path to the background-images does not work either.
Renaming the files did not work.
The images can be displayed just fine if navigated to directly in the browser.
Monitoring Apache's access log, the browser doesn't even attempt to request the images (!), even if an absolute URL is supplied in the CSS.
When I inspect the <li> Firebug says "could not load the given URL" but when I copy and paste the background-image URL straight from the CSS in Firebug into a new tab - guess what? It works.
I have a <div> on the same page with a different background image from the same folder which works just fine. When I replace its filename with one of my "problem" files I notice it isn't displayed any more.
The images in question are 20x20px PNGs (but I tried JPGs too).
All other browsers work fine.
This is truly driving me crazy.
Unbelievable. Truly unbelievable.
The culprit was Adblock Plus, which I had installed on Firefox but not any other browser. It was interpreting the names and/or class names of the background images as being either advertisements or social media annoyances, and therefore silently blocking them.
I had previously added my production domain to its white list, but when it changed I forgot to update it.
That explains why some image filenames worked (e.g. icon_f.png whereas others - icon_fb.png or icon_facebook.png - did not).
Let this be a lesson - do not run any kind of addons on your development browser.
I was ready to cry... and think I will now. Cry for my stupidity.
Thank you to all for your input.
Specifically, the culprit is Fanboy's Social Blocking List, which is one of the filter subscriptions included in Adblock Plus. It has already caused me a lot of distress in the past.
To disable it, click on the Adblock Plus toolbar button and choose Open filter preferences. You'll then find the list of subscriptions and you can simply unsubscribe to that one.
It's better than disabling Adblock Plus completely so you can continue using it for what it was originally intended: blocking ads.
I am developing a .Net MVC 3.0 Web application. There is a part I have to display invoice details like this.
On the top right corner I need to give Print, PDF & Copy to Clipboard function.
How to add those three button with above functions. Please Help ME......
Thanks In Advance.....!!!
Note: (I added this part later). There is a whole page. But this preview invoice is just a part of page wrapped by div tag. I don't want to print the whole page. I just want give three buttons only to that invoice div tag. Thanks :)
pdf = simply link to the URL of the PDF (Or the URL that generates the PDF)
print = what are you printing? The PDF? If so, this is redundant, as a person just needs to click the PDF and can print from there. Is it to print the web page? Again, redundant, as the web browser already has a print feature.
copy to clipboard = what are you copying to clipboard? For now, this is can only be accomplished via Flash, and, likely in the future not something you can do at all. This question's answers list some options: How do I copy to the clipboard in JavaScript?
Bottom line is that the image you provided appears to be a wireframe created by an IA or UX person that doesn't understand how web pages work. Not an uncommon thing, but really this is an UX issue, not a development issue. The problem needs to be addressed by the UX team first.
UPDATE based on question's UPDATE:
Regarding only wanting to deal with the contents of a particular div, the PDF and COPY TO CLIPBOARD comments above still stand.
What changes is the PRINT option. This can get messy. You could try swapping out the CSS via JS to only display the part you want to print, then triggering a print dialogue via JS, but that's going to be somewhat messy. I'd maybe consider instead making the PRINT icon a 'PRINT FRIENDLY' icon. Upon clicking that update the CSS to only display the content you want to print. Then let users use the PRINT feature in the browser, or you could try triggering the print dialogue with another bit of JS (though I'm not sure where browsers are at in supporting you printing from JS directly).
What I'm trying to do is to save the changes I make to CSS and HTML on different sites with Firebug.
Just to be clear, I don't expect Firebug to upload the changes to the server via FTP or anything. I just want to save the changes locally, so only I will be able to see them.
For example I've seen a few Firefox/Chrome extensions that add a download button under every video on Youtube, so I know it's possible to do that somehow.
If you have a different way to achieve what I'm trying to do, I'll be glad to hear about it.
(It doesn't have to be with Firebug.)
Thanks in advance!
If you don't mind using Web Developer Toolbar it's easy to save changes made to the DOM (and CSS).
When you install the toolbar, you'll get a "View Source" menu, click on that and choose "View generated source". Then just copy and paste that into a .html file.
You did not say if you alter your HTML or CSS, if CSS, FireFile is a very good addon for this.
Edit, with some Googling, i found FireDiff, which states that it can export changes made in Firebug, i have not tested it bit it's worth checking out.
You could try using Greasemonkey.
It has support for adding custom scripts that are run whenever you load a page (linked to which pages it should load on) and that can make changes to the page dynamically.
https://addons.mozilla.org/en-US/firefox/addon/greasemonkey/
The http://chrispederick.com/work/web-developer/ web developer toolbar will let you add a user style sheet to a site which should achieve your goals.
This may or may not be exactly what you're asking for, but you can download the extension FireDiff in order to save changes made with FireBug. I made a little tutorial on how to do it here: https://www.youtube.com/watch?v=m4OmZLX2zd4
I have a somewhat simlar use-case that I solved differently. I'm not sure if it is what you are looking for or not. I'll describe the behavior and if that is helpful I'll explain exactly how I implemented it.
I changed the code that execute when you click "Run" (or Ctrl+Enter) to check to see if the first line of the code is a hard-coded string //LoadFromFile:<file path>. If it is, and the file exists then I pull the file off of the local file system and run it instead of executing the code in the console window. This way I can use an external text editor to write code.