Hardcode file data into webpage for download - html

I have a pdf document, whose path i have hardcoded into my webpage.
I also have a download link, clicking which the user can download the file.
<a href="Path\to\file" download>Click</a> (Works in HTML5)
However instead of having to carry both the webpage code and file separately, is it possible to incorporate the file data into the webpage itself and form a downloadable file whenever the user clicks on the link?

You can try to base64 encode that file and add it as link url:
DOWNLOAD
But adding file source to HTML is worst thing you can do. Why you need that? Your HTML will be loaded very slowly. CTRL + U and console debugging will be extra slow.

Related

How to save an HTML page in a PDF whit a button?

Hi guys i need to save my HTML page in a PDF file how i can do that ?
Function or external app?
this is one example of my page:
|
v
Can anyone link me a tutorial? it's my first experience with these things
i need to store the pdf in a directory in the server .. whit window.print() user must click Print in the layout... i want a function that print in automatic without any user action
If you want to add a button to save a page as PDF, you might just assign window.print to the button. All of the modern browsers will allow the user to save document as a PDF from the print dialogue.
EDIT: for storing PDF on a server you may use a library like html-pdf

Saving HTML from website with image src intact?

I have a simple HTML file that sits on my website. I use this with <div contenteditable="true"> sections and I edit the content on the fly and send it as an HTML email.
If something goes wrong, I save the file as HTML in case I need to retrieve the message sent on any given day.
The problem is saving the HTML from the browser to you computer will save the images and change the src in the file to that location in your directory. I'd like to avoid this behavior since:
I don't want copies of the same images saving every single day.
If I need to resend I can just open up that file from my computer, copy, and send in an email easily. But if I delete them from my computer, then the new src's will point to the wrong place.
So is there a way to tell Chrome not to alter the HTML when it saves and to not save images?
Type ctrl-u on Firefox or Chrome to view html source, then copy and paste to your text editor. Save file with html extension.

Pack a text file into an HTML file for download

Instead of creating an additional text file and provide a link to it, can one embed some texts into an HTML file and provide a link to download it? The solution should work for a static website.
You should be able to base64 encode the file in the link, but you may want to do some cross-browser testing.
See Create a file in memory for user to download, not through server
If I understand correctly, you have a static website and you want to be able to create a link to a HTML page that should be downloaded instead of "viewed" in the browser.
The only way I can think of to solve this is to use the HTML 5 download attribute, like this:
Download

How to make PDF from GitHub open in new tab?

I have a pdf file in a GitHub repo and an anchor tag that points to it (<a href="https://github..../file.pdf>link</a>) and when I click it, i download the file automatically.
How to make it open the PDF in a new tab, before downloading it (to the file system, just downloading it within the browser)?
I've tried adding target="_tab" and target="_blank" to the anchor, but all got me the same results?
Is it achieable using just HTML, or I need to use an external JavaScript library?
You shouldn't need to add target="..." whatsoever. I guess you're pointing to the wrong URL. GitHub provides access to the raw file through this URL pattern:
//github.com/<account>/<repo>/raw/<branch>/path/to/file.pdf
Note the raw part in the URL. Check if you got your URL right. A functional example:
Test PDF
You can test it clicking this link. A dialog will open asking you to specify where to download it.

HTML: Form upload, only allow PNG, GIF & JPG

I have a form file upload. When the users goes to upload an image, it displays all files on their computer. How can I make the HTML upload dialog window to only display JPG, GIF and PNGs?
Just add accept to input with file types. This will filter the list of displayed files, but not create ban on download other files. This is convenient, because it is simple.
The file upload dialog in the web browser is outside of your control. You could create a Java applet for uploading images, like Facebook did.
As this hasn't been answered yet; add the following code to your file input
accept="image/x-png,image/gif,image/jpeg"