What is the best way to copy HTML to a clipboard, so that the user can copy it prettified to Email clients (at least outlook)?
I have an Angular app running which uses Angular Materials Clipboard module to copy content to the clipboard:
import { Clipboard } from '#angular/cdk/clipboard';
constructor(private clipboard: Clipboard) { }
copy(): void {
const content = document.getElementById('copy-field');
this.clipboard.copy(pretty(content!.innerHTML));
}
I understand that I copy HTML code. So after copy(), I paste raw HTML. Is there any way to render this HTML code before copying it? Or can I use the rendered code directly?
What do I want to achieve?
The user should be able to copy everything to his/her email client. For example, an image with text should be displayed like in the browser. But my current solution displays the HTML (...).
Related
I have a React and Node app. What I want to do is when the user selects embed, a link is generated and HTML is available to copy and paste. For example -
<div user-id="12"></div>
<script src="https://cdn.name.com/name.v1.js" async="async"></script>
How do I generate this CDN link from my build? and then tie an id to it?
Thanks!
Please go to your public folder, generate a new html file over there like mynewpage.html. Place all of the required content like images, stylesheets everything in public folder.
Then when user hit on embed get page content using whether axios or others and render the content in pre tags.
I'm using a javascript injector plugin for Chrome on one of the sites that my company uses. We use a third party provided software and i've made numerous edits to it just to make it more customized to our office needs. Our office schedules surgery for patients but the software doesn't come with a module for that. So I decided to make one by scraping data from the patient's info page and inserting it into the paperwork where it needs to be.
Currently this is my process: page loads -> Scrape data from page and insert those strings into preview form (bootstrap modal) -> Once form previewed, take form values and pass to paperwork page.
In order to inject the modal html contents for the preview window, I have to use backticks to work with interpolating variables into the html contents (ex: <h1>${patient}</h1>). All that is working perfectly. I can pull the scraped values from the page just fine.
I also have the html for the paperwork page being generated by a document.write function on a new window. But because i'm injecting all this, I can't refer to another file, this all has to (or seems to be that way)be generated by this one stream of JS code. But I can't figure out how to nest the paperwork page within the html/script of the parent js (which has backticks) and pass all the variable information to the paperwork page.
I know this is confusing because i'm confused writing it. Essentially i'm injecting two html files into a parent page. But the second html file is a child of the first html file. Since the first one is already injected with backticks, I can't get the second one to perform since I can't have nested backticks.
I've really broken my code down here to try and communicate the best example.
var patient;
$(body).append(`
<input id="patient" type="text" value="Arnold S.">
<button onclick="producePaperwork()">Click here to load paperwork</button>
<script>
function producePaperwork(){
patient = $("#patient").val();
var w = window.open();
w.document.write(\`<h1>${patient}</h1>\`);
w.document.close();
}
</script>
`);
I've tried to escape the internal backticks as shown in my code, this produces a result of "undefined" being printed on the new page.
I've tried backticking the internal variable: <h1>${`patient`}</h1> and this just prints the literal word "patient" on the new window, not the contents of the variable.
Does anyone have any advice on how I can accomplish this?
I have an internal site with lots of different pages, all of them has a printable version controlled by CSS only. My users create PDFs using Chrome's Print/Save As PDF menu command. I wonder if it would be possible to use JavaScript to initiate Save As PDF from a button and automatically open the saved PDF (actually saving is not important, just viewing it on a new tab is fine).
Chrome-only solution is OK. It's also not a problem if a Chrome extension needs to be installed. Anything is fine as long as I don't have to write extra PDF rendering code for each page layout.
There is no way to force a browser to print something as a PDF, or even send a request to a printer, the best method you can do it use the print() function in JavaScript.
A way you can do this is to make it an iframe object and print it like this:
document.getElementById('content-frame').contentWindow.window.print();
That would make it send a print menu for the iFrame, printing only the content within the iFrame.
The html embed tag displays PDFs with print and download options. Depending on the setup of the page, you could append an element somewhere with the pdf source dynamically populated from a button users see beside the PDF's name.
For Example...
HTML:
<div class="parent-container">
<h3 class="pdf-name">Some PDF Name</h3><button type="button" class="open-pdf"
data-pdf="source">Open</button>
</div>
Javascript:
function displayEmbeddedPdf (event){
event.preventDefault();
let pdfSource = $(this).data("pdf");
let pdfDisplay=`<embed class="embed-responsive-item embedded-pdf"
src="https://via.placeholder.com/150#view=FitH">`
$(this).parent().append(pdfDisplay);
}
$( document ).ready(function() {
$(".open-pdf").click(displayEmbeddedPdf)
});
I've used an image placeholder in the space below, but you could instead
insert the pdfSource variable to access a source in your directory ... Also
note that the "embed-responsive-item" class on the embed tag is from with
Twitter Bootstrap and helps with the responsive formatting. Also, "#view=FitH" is an open parameter. Here's more info about open parameters: https://www.adobe.com/content/dam/acom/en/devnet/acrobat/pdfs/PDFOpenParams.pdf
See the code on this CodePen: https://codepen.io/gemiller/pen/qvyaGZ
Here's an example of what an embedded pdf looks like: https://msu.edu/~urban/sme865/resources/embedded_pdf.html
I am writing a small C# application to manage our Safety data Sheets (of chemicals) from our suppliers.
At the moment I manually search for the chemical and save the pdf and add a link to the pdf in my program. The problem is I still have many chemical to go so it would be better to automate the process.
For example: A chemical has the following part number: 271004
The link containing the pdf is here:
Link
I have been reading the page source but cannot find a link to the pdf
But my knowledge of html/javascript is to limited at the moment.....
Is there any way to extract the pdf from the website?
Thanks in advance for any advice :)
For those trying to download a PDF file on Firefox and Chrome, put the mouse pointer anywhere within the PDF area and press control + s (on windows / linux) or ⌘ + s (on mac). Doing so will download the file.
Look in the page for an iframe element with id "msdsPageFrame". The src attribute of that element contains the url to your PDF. Download that url.
If you have questions about how to download an URL or how to parse a page in search for an id, ask another question.
Now I am able to access the pdf file direct using an product code:
www.sigmaaldrich.com/MSDS/MSDS/DisplayMSDSPage.do?country=NL&language=EN-generic&productNumber=271004&brand=SIAL&PageToGoToURL=null
Using the following code I try to download the pdf:
private void Download()
{
webClient.DownloadFileCompleted += new AsyncCompletedEventHandler(Completed); // Uses the Event Handler to check whether the download is complete
webClient.DownloadProgressChanged += new DownloadProgressChangedEventHandler(ProgressChanged); // Uses the Event Handler to check for progress made
webClient.DownloadFileAsync(new Uri("http://www.sigmaaldrich.com/MSDS/MSDS/DisplayMSDSPage.do?country=NL&language=EN-generic&productNumber=271004&brand=SIAL&PageToGoToURL=null"), #"C:\Users\test\Downloads\newfile.pdf"); // Defines the URL and destination directory for the downloaded file
}
private void ProgressChanged(object sender, DownloadProgressChangedEventArgs e)
{
Debug.WriteLine("DownloadProgressChangedEventHandler");
}
private void Completed(object sender, AsyncCompletedEventArgs e)
{
Debug.WriteLine("AsyncCompletedEventHandler");
}
However this does not work. The problem is that the pdf is first generated (takes a few seconds). However, the AsyncCompletedEventHandler is triggered right away. I think this is the problem why the pdf file is not downloaded.
Let's say I've csv file in my C:/test/tes.csv and I've a text box in html file and paste the above path in text box. I've "Load Data" button near by the textbox. when I click on the button I want to alert the content of the file. Insted of default file picker in HTML/JS, there is anyway to load the data? I want to use it in my application.
Please help me to figure out it
You should try and use the FileReader API, which allows you to read the contents of files (or raw data buffers) stored on the user's computer.
Eric Bidelman wrote this awesome article that can help you get started.