Employees need to check data imported using OCR. They have web interface showing imported data on the left side and the scanned image on the right. When dealing with a large list of items they get lost and are asking for a tool/pen able to highlight (PDF) rows that are already checked.
Is there any chance to use JavaScript and draw to the PDF that is viewed?
If you are viewing the PDF in a plug-in, the answer is no, not through JS.
If, however, you can leverage a tool like pdf.js, this may be possible, depending on what your document uses in terms of PDF elements. For example, pdf.js has an Annotation plug-in, which looks like it may enable you to actually create annotations.
You will not be able to save the changes, however. If you want to do this, you are strongly encouraged to use a proper UI and not just a PDF (though, you may read from the PDF to generate it).
Related
Hi i want to generate a pdf of big page as one single file without page break.
Below image shows page break upon download(that i want to avoid, want to download as single page).
Question: i don't want to split the page upon download as multiple page. but want a single page.
here is what my working example look like codesandbox demo
Note: any pdf generating plugin is fine for me, if it works.
Please help me thanks in advance !
Your current styles do not make it easy to set the page media there are just too many conflicts in A4 layout so you need to reconsider the output as A3 or A2 as seen here 4A4 printed without any code box controls, or scale down your output to fit on the A4 page you have set.
Have you considered an API rest service? Restpack HTML to PDF has a free trial. Worth a shot to see if you can get the correct formatting. The API call's JSON body allows you to specify the px length and width you want. This should avoid pages breaks if you size it correctly. You can read their documentation here
You can use the CSS properties break-before, break-inside and break-after. In your concrete example, adding this CSS rule avoids all the flex containers splits:
.flex-container {
break-inside: avoid;
}
Please note that there are some limitations to these rules, and some browsers might produce different results too.
The PDF standard
The PDF file format standard was built on a page descriptor language and created for documents with defined page sizes.
This means that a valid PDF file does not support unpaginated content.
So what?
It may be achieved in some unsupported manner, but circumventing the standards will usually result in unpredictable behavior across different viewers.
You may be able to generate one big non-standard page size, but that could also be a potential problem in some PDF viewers.
Still want to try?
It's up to you, go ahead, but what ever you do, make sure you test your output files well.
Preferably with several of the most popular PDF reader/viewer applications before distributing them.
Unless you want to publish files that may turn out to be useless to your intended recipients.
I am currently working on multiple dashboards for the healthcare industry and one of the common requirement is generating PDF from the screen as is. We dont have any common CRUD operations on these dashboards. They typically include a lot of charts (using highcharts), some tabular data, accordions etc. And everything is rendered as a part of few select statements which will be fired on the page load or if a user clicks on some chart or any HTML element.
I am looking into ways to do this and there are 2 options, out of which the most wel-known option is to use third party libraries to generate PDF from the HTML itself which consists of the minimal effort of writing about 3-4 lines of code.
The other option is to write code to dynamically generate PDF which looks like the UI. This will require much more effort since we have to take into consideration the branding and styling, generate charts that look exactly like on the dasboard UI, create tabular data just like on the UI of the dashboard.
The common UI requirement of all the dashboards is to support all major browsers - IE starting from 9, forefox, Chrome, Safari. Also support iPads, last 3-4 versions of iPhones and other most common devices.
The technologies that we use for these dashboards are angular 2.0, some JQuery, HTML, CSS and asp.net web api and in some cases asp.net MVC.
I need to know the pros and cons of above two ways to generate PDF for all these dashboards. I googled about this found very little. Can somebody share some insight into this and give some inputs based on their experience?
Based on what you describe, you'll want to do at least a mix of the two. It's always better if you can use an HTML-to-PDF converter because that saves a lot of development time. But since the UI has things like accordions and such, this means you need to determine how to present that dynamic information in a static PDF.
So the hybrid approach I've used in the past is to use Angular to markup the HTML like this:
<my-accordion ng-if="!ExportingPDF"> ... accordion view for browser ...</my-accordion>
<div ng-if="ExportingPDF"> ... expanded and slightly-modified view for PDF ... </div>
When the user clicks on an "Export PDF" button, you can create a function that will do a $scope.ExportingPDF = true and then grabs all the visible HTML on the page (after a short $timeout delay to give Angular time to update the DOM).
Then your ExportPDF function will POST the HTML to the server where a server-based HTML-to-PDF code library will convert the HTML and then send it back to the browser as a file download attachment.
Example code:
$scope.ExportPDF = function() {
$scope.ExportingPDF = true;
$timeout(function() {
$ajax.post("/path/to/conversion-routine.abc", { data: $('html')[0].outerHTML }
}, 50); // short delay so Angular has time to update the DOM
}
This lets you utilize the power of Angular and your existing markup while still dealing with all the weird little UI things that need to be adjusted to present properly in a static PDF document.
Is there any way to programmatically create (client or server side (PHP)) a image from a specific DIV or a complete (web) page? I'm currently creating a web-site for free coupons and the idea is when the end-user clicks on the "Print" button, the app opens a new tab/window with all the selected coupons as a single image (JPG, PNG or etc..) in A4 format ready for printing. Each coupons has it's own data (Article name, price, description etc..) so I need it to be done programmatically over a coupon-template I designed.
I do not ask you to write code for me, just to suggest a solution I could use/develop. If not already exist, I will upload/publish it for free :)
Update: I did it with the PHP GD library :) Still not satisfied with the idea to use Images instead of PDF, because each printing results with different Coupon sizes (images) on different PC's. That's why PDF may would be a better solution. You can see/test it on demo.svikuponi.ba - Just select a few Coupons and click the PRINTAJ button above.
You cannot create image from div for sure but yes you can create dynamic images in php using its gd library.
Following links will help:
http://php.net/manual/en/function.imagecreate.php
http://phptutorial.info/learn/create_images/
Here is a great way for you to create images on the client side: http://smus.com/screen-capture-for-chrome-os
You can take this and create a web app that will work nicely on webkit (for other browsers - I'll look at JS polyfills).
Did anyone mention html2canvas and/or jsfeedback ?
It create a page screenshot completely in javascript, then you can send to the server via ajax..
Obviously, CSS support lack some things.
In php, there is many image related functions like imagettftext() in GD library
for details, check this out http://php.net/manual/en/book.image.php
if GD is not enough, you can try imagick as well
for the template, you can try creating a true color handle in php from your file(image) and add the text part or something else with all kinds of effects and bar codes etc.
but in your case, i would suggest dynamic PDF creation since it would better with formatting instead of plain image, the pdf lib :
http://www.fpdf.org/
you could easily have a background image of your token/voucher and overlay the text using some php variables.
i believe it is possible to create a unique bar-code with php imaging too.
It is possible to get a screenshot from a webpage, but this is quite a hassle. You need to start a webbrowser to render the page and get a screenshot from that.
You are probably better of by parsing some specification and feeding it to a couple of GD or Imagick functions. This is less versatile, but easier to manage.
I'm trying to load a "webpage" using the Android WebView but the images won't load. Firstly, I retrieve a text String that's formatted in Markdown. Afterwards, I convert the Markdown into HTML using Markdown4J, and then using the Android WebView's loadDataWithBaseUrl() function, I load the WebView with the html.
String html = null;
try {
html = new Markdown4jProcessor().process(mText);
} catch (IOException e) {
e.printStackTrace();
}
String css = "<link rel=\"stylesheet\" type=\"text/css\" href=\"blogstyle.css\" />";
final String htmlData = css + html;
body.loadDataWithBaseURL("file:///android_asset/", htmlData, "text/html", "UTF-8", null);
Everything in the webview displays and is formatted properly except the images. The images just won't show, and there are definitely image tags inside of the HTML, such as
<img src="https://www.random.org/analysis/randbitmap-rdo.png">
And I have no idea why my WebView wouldn't be able to display this image?
EDIT: The internet permissions in the manifest is already requested. And here is an example of a sample markdown string. I then convert this line into HTML.
"One of the huge problems today with web development is that it isn’t modular; because of how CSS and HTML work, it’s extremely difficult to just drag and drop an element from one site into another without some very strange side-effects. Shape and size can be different, resources can fail to load based on relative paths, and you have to import at least a .html, .css and .js file for each element. Even with all that, there’s no guarantee you won’t have CSS or JavaScript collisions.\n\n \n\nThe solution to this problem? [**Web Components**](http://webcomponents.org/). Now you should know up front that Web Components don’t work in IE and Safari, but they *are* under development.\n\n \n\nSo, what are web components? Well, essentially, they are plug-n-play modules for the web. The picture here is actually a great example. If you’re familiar with web design, imagine how long this would take to make, even statically. You’d have to position the images, set the roundness, give a height to the three main elements, set the font colors… Basically, it’d take you more than five minutes to get this up-and-running.\n\n\n\nSo what if I told you *all the code for what you see is two lines?* Just these two:\n\n \n\n\n <linkref=\"import\"href=\"gitcard.html\">\n <github-carduser=\"nasawa\">\n\n\nAnd that’s all. Just import the html and use the custom element! Using a new templating system called *Shadow DOM*, the browser holds a template called *github-card* with encapsulated styles and JavaScript. This way, even if you have elements named the same, there will never be any collision. And of course, you can have the *github-card* tag wherever you want, as many times as you want, and data will not transfer over.\n\n \n\nOn the other end, if you’re creating a web component, you can easily add as many customizable fields as you want to allow the user to modify your component at specific spots. For example, this is what the simplified Google Maps component looks like:\n\n \n\n\n`<google-mapslatitude=\"30.686603\"longitude=\"-88.046224\"></google-maps>`\n \n\nAnd a complicated Google Maps component looks like this:\n\n\n <google-maplatitude=\"37.77493\"longitude=\"-122.41942\"fitToMarkers>\n <google-map-markerlatitude=\"37.779\"longitude=\"-122.3892\"\n draggable=\"true\"title=\"Go Giants!\"></google-map-marker>\n <google-map-markerlatitude=\"37.777\"longitude=\"-122.38911\"></google-map-marker>\n </google-map>\n\n\n \n\nAs you can see, it is truly a great time to be in web development. Complex procedures are getting better and easier every day as we push closer to a true implementation of HTML5 and a unified multiplatform experience, and web components are a spearhead on that advancement. Look out for the next big thing – it’ll be here before you know it!\n\n \n\nChristopher Johnson \n Jr. Associate Programmer"
which would give me the following in HTML:
<p>"One of the huge problems today with web development is that it isn’t modular; because of how CSS and HTML work, it’s extremely difficult to just drag and drop an element from one site into another without some very strange side-effects. Shape and size can be different, resources can fail to load based on relative paths, and you have to import at least a .html, .css and .js file for each element. Even with all that, there’s no guarantee you won’t have CSS or JavaScript collisions.</p>
<p> </p>
<p>The solution to this problem? <strong>Web Components</strong>. Now you should know up front that Web Components don’t work in IE and Safari, but they <em>are</em> under development.</p>
<p> </p>
<p>So, what are web components? Well, essentially, they are plug-n-play modules for the web. The picture here is actually a great example. If you’re familiar with web design, imagine how long this would take to make, even statically. You’d have to position the images, set the roundness, give a height to the three main elements, set the font colors… Basically, it’d take you more than five minutes to get this up-and-running.</p>
<p><img src="https://www.ruralsourcing.com/wp-content/uploads/2014/09/blog-image-265x300.png" alt="blog-image" title="" /></p>
<p>So what if I told you <em>all the code for what you see is two lines?</em> Just these two:</p>
<p> </p>
<pre><code><linkref=\"import\"href=\"gitcard.html\">
<github-carduser=\"nasawa\">
</code></pre>
<p>And that’s all. Just import the html and use the custom element! Using a new templating system called <em>Shadow DOM</em>, the browser holds a template called <em>github-card</em> with encapsulated styles and JavaScript. This way, even if you have elements named the same, there will never be any collision. And of course, you can have the <em>github-card</em> tag wherever you want, as many times as you want, and data will not transfer over.</p>
<p> </p>
<p>On the other end, if you’re creating a web component, you can easily add as many customizable fields as you want to allow the user to modify your component at specific spots. For example, this is what the simplified Google Maps component looks like:</p>
<p> </p>
<p><code><google-mapslatitude=\"30.686603\"longitude=\"-88.046224\"></google-maps></code>
</p>
<p>And a complicated Google Maps component looks like this:</p>
<pre><code><google-maplatitude=\"37.77493\"longitude=\"-122.41942\"fitToMarkers>
<google-map-markerlatitude=\"37.779\"longitude=\"-122.3892\"
draggable=\"true\"title=\"Go Giants!\"></google-map-marker>
<google-map-markerlatitude=\"37.777\"longitude=\"-122.38911\"></google-map-marker>
</google-map>
</code></pre>
<p> </p>
<p>As you can see, it is truly a great time to be in web development. Complex procedures are getting better and easier every day as we push closer to a true implementation of HTML5 and a unified multiplatform experience, and web components are a spearhead on that advancement. Look out for the next big thing – it’ll be here before you know it!</p>
<p> </p>
<p>Christopher Johnson <br />
Jr. Associate Programmer"</p>
I want to let a user save a pre-defined part of a website to their computer in probably pdf format with some different css styles applied.
I have done the same for printing, but I couldn't find any examples for saving.
How would I go about doing this?
The specific parts are in their respective divs and ids.
Thanks
You'll need a library to do this.
depending on the language you're using, there's a lot of possibilities. Even google chrome itself print pdf from html.
Give us more details about your project