I have made an html form. What i want to happen is when the user clicks submit for the page to be emailed as a pdf (like the pdf that comes up if you print the webpage). I've been looking a all sorts of script but nothing seems to do what I want.
You will have to have a server-side component that takes the values, creates the PDF, and then e-mails it appropriately.
You'll be surprised to hear that not all browsers can easily make pdfs out of web pages. Hence, there is no universal JavaScript command that simply taps into a browser's capabilities. That leaves you with options:
Generate the pdf on the server (using, say, pdfbox, and send the email right from the server (using good old sendmail).
Generate the pdf on the server, have the user download it, and then transfer it all to his email client. (Might just work, see on Stackoverflow).
Generate the PDF in the browser, cross-platform. There are some Javascript-only libraries that can generate PDF.
Use Safari's PDF capabilities. Safari can make PDFs just in the print dialog. Explain that to your users and call window.print().
Related
Background:
I need to allow users to create web pages for various products, with each page having a standard overall appearance. So basically, I will have a template, and based on the input data I need the HTML page to be generated for each product. The input data will be submitted via a web form, following which the data should be merged with the template to produce the output.
I initially considered using a pure templating approach such as Nunjucks, but moved to ReactJS as I have prior experience with the latter.
Problem:
Once I display the output page (by adding the user input to the template file with placeholders), I am getting the desired output page displayed in the browser. But how can I now obtain the HTML code for this specific page?
When I tried to view the source code of the page, I see the contents of 'public/index.html' stating:
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
Expectedly, the same happens when I try to save (Save As...) the html page via the browser. I understand why the above happens.
But I cannot find a solution to my requirement. Can anyone tell me how I can download/save the static source code for the output page displayed on the browser.
I have read possible solutions such as installing 'React/Redux Development Extension' etc... but these would not work as a solution for external users (who cannot be expected to install these extensions to use my tool). I need a way to do this on production environment.
p.s. Having read the "background" info of my task, do let me know if you can think of any better ways of approaching this.
Edit note:
My app is currently actually just a single page, that accepts user data via a form and displays the output (in a full screen dialog). I don't wish to have these output pages 'published' on the website, and these are simply to be saved/downloaded for internal use. So simply being able to get the "source code" for the dislayed view/page on the browser and saving this to a file would solve my problem. But I am not sure if there is a way to do this?
Its recommended that you use a well-known site generator such as Gatsby or Next for your static sites since "npx create-react-app my-app" is for single page apps.
(ref: https://reactjs.org/docs/create-a-new-react-app.html#recommended-toolchains)
If I'm understanding correctly, you need to generate a new page link for each user. Each of your users will have their own link (http/https) to share with their users.
For example, a scheduling tool will need each user to create their own "booking page", which is a generated link (could be on your domain --> www.yourdomain.com/bookinguser1).
You'll need user profiles to store each user's custom page, a database, and such. If you're not comfortable, I'll use something like an e-commerce tool that will do it for you.
You can turn on the debugger (f12) and go to "Elements"
Then right-click on the HTML tag and press edit as HTML
And then copy everything (ctrl + a)
I'm creating a site with downloadable PDF links in which we add a parameter at the end of the file download URL to tell the browser how to serve up the file:
https://example.com?ref=0&download=y
Using the parameter download=y opens the browser's file download dialog, asking the user to save the file to their desktop so they can open it with their machine's default PDF viewer.
Using download=n will open the browser's built-in PDF viewer, allowing the user to read the PDF without saving it to their machine.
I'm trying to understand which approach is more accessible for mobile / desktop / users with disabilities. Is one approach inherently better than the other from an accessibility perspective?
You could always let the user decide. If your link went directly to a PDF, then the user can change their browser settings to either view the PDF within the browser or to use an external viewer. I much prefer that over the web developer trying to choose for me (no offense). Personally, I like to view the PDF externally in Acrobat because the screen reader handles the PDF pretty well if the PDF is tagged. If you don't have a tagged PDF, then it won't matter how you serve up the file because the visually impaired user will have a tough time reading it.
Letting the user decide is the correct approach. This isn't a setting that you should be attempting to configure for accessibilty purposes.
Having properly tagged PDF documents is vastly more important.
It's also good practice that any HTML links to PDF documents be labeled as such in the anchor text.
e.g. Title of Document (PDF)
I have never thought about this before, but is there a way to control what happens when a user clicks a link to a PDF file?
My boss would like to offer two links to do the following:
1. View this PDF in the browser
2. Download the PDF
Is there a way to do this ? I don't think about these kinds of things, most modern browsers will open a PDF in the browser. If I want to download it, I right-click download. Any way to force the action ?
Thanks
You can link to an asset, or you can stream the data to the browser. Those are the only two options you have on your end.
If you link to a file: <a href="file.pdf"> whether or not it opens in the browser or not is entirely dependent on the end user's browser and operating system preferences.
You can force the download of a file, however by streaming it to the browser, which will usually trigger the browser's save as dialog.
Your best bet, though, from a user experience perspective, is to simply link to the PDF and let the user know that they are about to click on a PDF link...that way they can decide what they do with it.
How PDFs are displayed are based on the user's browser version and configuration. For example Chrome includes a PDF viewer by default, but the user has the ability to change the behavior of the plug-in ( automatically open PDFs, disable, ask the user).
One way to do this is to set the ContentType and Content-Disposition so the browser will know how to handle the request. For example in ASP.NET you would do it like this:
Response.ContentType = "application/pdf";
Response.AddHeader("Content-Disposition", "attachment;filename=filename.pdf");
Disclosure: I hijacked this code from this article
Let me know if this helps.
There are a few ways using server side technologies:
you can link to a .net / php page that serves the file to download, eg:
download pdf
or to display:
view pdf
If you are using itextsharp to generate your pdf, you can add the following to the Response object to force a download:
Response.AddHeader(
"Content-Disposition",
"attachment; filename=itext.pdf"
);
or the following to open in the same window:
Response.AddHeader(
"Content-disposition",
"inline; filename=itext.pdf");
The user can always set their adobe reader plugin to always download, in which case the browser window display won't work.
I am trying to make a Chrome extension for personal use that makes all the password fields type="text", so I can see the clear passwords. (I know that I can probably find something like this in the Chrome store, but it's something I want to do myself).
I am however having a hard time accessing the actual page content (the page I'm viewing in the tab). If I do
document.getElementById('text')
this selects the element from background.html not the page I'm viewing. How can I access the actual page?
Also, is there a way I can include an external javascript file so I can use functions from there?
You would need to use content script - javascript file injected into an actual page with access to DOM and events.
I currently have a "PrintingWebService" that I call from an AJAX page with all the information that is needed to construct a highly customized PDF printout using PDF Sharp and the PDFSharp's GDI+ mode, which takes DrawString and other commands that work basically just like GDI+ only they are drawn to the PDF.
I then save the PDF file to a location on the webserver and return the file name from the web service, and the AJAX page opens a new window with the pdf file.
So far, it works well, however, there is one part of my AJAX page that I want to printout and I haven't come up with a solution for yet. I've got a string of the HTML content of a TinyMCE editor that I want to dispay in the bottom part of the PDF page.
I'm looking for some sort of tool I could use for this purpose. Even something opensource that prints to GDI+ I could use by taking the source code and translating it to use PdfSharp's GDI+ (the class names are like XGraphics, with each class having X before the GDI+ name).
If I have to I will limit what HTML can be generated by TinyMCE and write my own renderer, but that will be a big challenge, so I'm looking for other solutions first.
I've stayed away from a printer-friendly page approach because I wanted to construct a page that was a near identical of an existing WinForms printout, using my existing code. With PdfSharp I was able to convert all the code except the text area stuff (which used the RichTextBox and RTF in the WinForms version).
Tony,
I personally have used WebSupergoo's ABCPdf library with much success. You can actually render HTML directly to the PDF and it does fairly well in regards to accuracy.
Another free software that will allow you the flexibility of writing HTML to PDF that I have used in the past with much success is iTextSharp.
Otherwise, I think you'll have to write something to render HTML to GDI.
Either way, you may want to consider using an HttpHandler that you map to using your web.config to generate the PDF file. This will allow for you to render the PDF to a bytestream and then dump it directly to the user (as opposed to having to save each PDF receipt to the web server). It will also allow for you to use the .pdf extension in the page that returns the receipt (PurchaseReceipt.pdf could be mapped to a HttpHandler)... making it more cross-browser friendly. Older versions of Adobe / Browsers will not display correctly if you start throwing a PDF byte stream from an ASPX page.
Hope this helps.