My goal is copy the result of my HTML code with a clipboard button.
So, I have something like this in the main section of my page, and I want to be able to click in the 'button' of the top corner to COPY that entire label and later be able to paste it into Gmail (plis open)/outlook without any problems with the design.
Note: The HTML code that generates the label has 100% compatibility with emails (I used Can I email?).
Manually would be something like this action then crt/cmd + C, but I want to achieve the same process with JS code, it's possible?
HTML code of the entire card (DIV):
<div id="card-signature" class="relative min-w-[250px] rounded-2xl mb-8">
<!-- Button to copy the 'Uber Signature'-->
<div id="1" class="btn absolute w-[30px] h-[30px] top-0 right-0 p-2 rounded-tr-xl bg-gray-100 cursor-pointer">
<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true">
<path fill-rule="evenodd" d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z"></path><path fill-rule="evenodd" d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z"></path>
</svg>
</div>
<div class="p-6 overflow-x-scroll scroll-smooth">
<!-- SIGNATURE #1 - Joseph Ero -->
<div id="card1" style="margin: 0 !important; padding: 0 !important; width: 100% !important;">
<div style="font-family: Arial, sens-serif; color: #000000; font-size: 14px; line-height: 1.3;" class="template-template1 is-flipped-false font-family-arial font-size font-family text-color">
<table border=0 cellpadding="0" cellspacing="0" role="presentation" style="border-collapse: collapse !important; font-size: inherit;">
<tr>
<td style="padding: 0 18px 0 0; line-height: 0px;">
<img style="border: 0px; height: 70px; line-height: 100%; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; min-width: 70px; width: 70px;" src="https://i.postimg.cc/pVCn3TjW/732135.png" alt="Email sender photo" width="70" height="70" class="photo photo-size" />
</td>
<td>
<table border=0 cellpadding="0" cellspacing="0" role="presentation" style="border-collapse: collapse !important; font-size: inherit;">
<tr>
<td style="font-weight: 700; color: #000000; font-family: Arial, sens-serif; font-size: 15px;" class="name title-color">Joseph Ero</td>
</tr>
<tr>
<td style="padding-top: 6px;">
<table border=0 cellpadding="0" cellspacing="0" role="presentation" style="border-collapse: collapse !important; font-size: inherit;">
<tr>
<td style="font-family: Arial, sens-serif; font-size: 14px; min-width: 108px;" class="phone">+1 500-400-4000</td>
<td style="padding-left: 10px;"><a href="mailto:john.doe@uber.com" style="color: #000000 !important; text-decoration: underline !important; font-size: 14px !important; font-family: Arial, sens-serif !important; font-weight: inherit !important; line-height: inherit !important;" class="email">joseph.ero@uber.com</a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding-top: 6px;">
<table border=0 cellpadding="0" cellspacing="0" role="presentation" style="border-collapse: collapse !important; font-size: inherit;">
<tr>
<td style="font-family: Arial, sens-serif; font-size: 14px; min-width: 236px;" class="address">2200 Blake Street. Denver, CO 80200</td>
<td style="padding-left: 11px;"><a href="https://www.uber.com" style="color: #000000 !important; text-decoration: underline !important; font-size: 14px !important; font-family: Arial, sens-serif !important; font-weight: inherit !important; line-height: inherit !important;" class="website link-color">uber.com</a></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table border=0 width="100%" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse: collapse !important; font-size: inherit;">
<tr>
<td style="padding-bottom: 25px; border-bottom: 1px solid #dedede;"></td>
</tr>
<tr>
<td style="padding: 15px 0 0 0; font-family: Arial, sens-serif; color: #000000; font-size: 14px; line-height: 1.3; min-width: 666px;">Wanna know more about our business? <a href="https://www.uber.com/dts" style="color: #000000 !important; text-decoration: underline !important; font-size: 14px !important; font-family: Arial, sens-serif !important; font-weight: inherit !important; line-height: inherit !important;" class="website link-color">Read our insights to learn more.</a></td>
</tr>
</table>
</div>
</div>
</div>
</div>
I tried with:
(1) Clipboard API process:
button.addEventListener('click', handlerClick)
function handlerClick () {
const idTarget = this.id
const cardSelected = document.querySelector(`#card${idTarget}`)
navigator.clipboard.writeText(cardSelected)
}
Result: [object HTMLDivElement].
(2) html2canvas: Doesn't work for my needs.
Solution
The code below resolve my goal. Useful documentation: Excellent article about selection and range; useful example; optional idea.
const button = document.querySelector('.btn');
button.addEventListener('click', handlerClick)
function handlerClick () {
const idTarget = this.id;
const cardSelected = document.querySelector(`#card${idTarget}`);
if (document.createRange) {
// Clear any INITIAL selection
const selection = window.getSelection();
selection.removeAllRanges();
// Select all the label (Signature)
const range = document.createRange();
const rangeSelected = range.selectNodeContents(cardSelected);
selection.addRange(range);
try {
// Copy all the label selected
let successful = document.execCommand('copy');
let msg = successful ? 'successful' : 'unsuccessful';
console.log(`Copy email command was ${msg}`);
// Clear any CURRENT selection (It's optional)
const selection = window.getSelection();
selection.removeAllRanges();
} catch (err) {
console.log('Unable to copy');
}
}
}
