How to preview a file in html using file path as argument - javascript

The application that I am working now require a functionality in such a way,
on click of preview button,the respective file should be previewed in a div.
I have anchor tag:
<a href={{item.url}}><b>{{item.fileName}}</b></a>
data binding is in angualr js.
onclick of the filename the file path associated with it should go to the preview method as below:
But i am unable to do it for all the file extensions and I dont feel this is the right approach to do the functionality.
var pdfObject="<object data='"+fullPath+"' type='application/pdf' width='300' height='200'>";
pdfObject=pdfObject+ "alt : <a href='"+fullPath+"'>pdffile_url</a> </object>";
$("#video").append(pdfObject);.
My requirement:With the help of filePath(Eg:C:\Users\arun_abraham06\Desktop\file."any extension"),need to preview the file in html.

You need to render a preview icon of the files serverside.

Related

how to add custom download button in html?

Java script:
var x = 'demo'
I want a html button from which we can download x as anyname.txt in which the value should be demo
In order to download a file when clicked on a button, the file has to exist within our project files (next to your HTML file...). So you're going to have to:
Create a .TXT file yourself and write in it what you need. After that place the file in the same folder as your HTML file.
Create a button in HTML using <a> tag because in order to download it we have to reference the file using href attribute.
In order to download the file we use download attribute. That attribute will download the file with the name that it has. If you want the file to be downloaded as anyname.txt you just have to add a value that you want to the download attribute -> download="Anything you want"
The final code should look like this:
Download
Of course, style it in CSS because this looks nothing like a button.
When clicking on this button locally (before publishing you site) it will not download the file because the computer already knows you have it. That's normal. Once published, when someone (even you) click on the button it will download the file as intended.

download a local file, on button click

Hi there I'm trying to download a local file on button click in VueJs
<a href="./documentation.docx" download>Download</a>
I have the documentation in the same folder as index
But when I'm trying to download, its saying No File
This should work properly as you've written it. It's essentially comes down to the given path, try something like this structure and this code (with an absolute path):
<a href="/azuki.jpg" download> download stuff </a>
Also, check the official documentation page here: https://cli.vuejs.org/guide/html-and-static-assets.html#the-public-folder

Electron app, plantUml generates images in Html code (jquery), button to download it but there isn't any source/href

Im developing a simple electron APP.
Project with all code in GitHub
Basically that is a plantUml viewer, you put the PlantUml code in the text area, press the button and a plantUml diagram appears ate the side bar.
Simple.
how it Works
In the HTML code insert a image with the tag uml, with the palntUml code:
<img uml='
Bob->Alice : foo
Bob<--Alice : foo
'>
Run this method, and all the images with that tag will be altered:
// I use this method to transform the plantUml code into a image
plantuml_runonce();
PlantUml jQuery module
Problem:
Well it works, it renders the image, but that image isn't saved in disk is embedded in the HTML, so I don't know the source of the image (href) to add a link/button to download the image:
<a href="WHAT IS THE REFERENCE TO DOWNLOAD THE IMAGE IN THE HTML??" download>
The problem is that electron also don't support right click, when I open the index.html in a browser I can do right click and download the image, but in here I cant...I need to add a button or a link to download the image, but I don't know how to access (maybe use a id in the image and use JavaScript to download?)
Attach an id to the image and write some JavaScript to download the src.
var link = document.createElement('a');
link.download = document.getElementById("someid").src;
link.href = document.getElementById("someid").src;
link.click();

Download pdf/word button javascript /jquery

I have data that saved in csv file. The data was used for creating some interactive graphs using d3.js and javascript. The files I have to run the graphs are some js files, css and html files. I don't need any server to run it.
Now, I want to add a download button on the page where the graphs are displayed. When user click download button, the csv will be downloaded as pdf/word file. Does anyone know how to do that? Any plugin to recommend?
Thanks a lot!
This might work for you. There is an HTML5 rule called "download" that can be added to an anchor tag.
<a href="documents/message.csv" target="_blank" download><button>Download</button></a>
In most browsers this "download" command forces the browser to open the download box. The download box itself will allow users to select their download format.
You can create an online cloud account with any free cloud-base storage (mega.nz is good), create folders for the files you want the public to see, upload those different formatted files into its own folder > copy file link and paste it in your button code like:
<a href="FILE LOCATION" target="_blank" download><button>BUTTON NAME</button></a>
on your site, it will show a rectangled grey download button that will redirect public to the folder with all those files they can choose to download.

Not able to open files from HyperLink control in IE9 & above

I am trying to open a file using hyperlink control, when I click on the link no action is getting triggered, but when I paste the file:/// path in IE browser directly the file is downloaded/opened, what could be the issue below is my href content and also one can check in JSFiddle at http://jsfiddle.net/q76VB/
My Link
Have you put the file on the server that is hosting your website?
Put the file in the same folder as your html files and change the link to this:
My Link

Categories

Resources