How can I copy a Mail Merge Field from any browser and paste it into MS-Word? I'm trying to build a web page where all you have to do is click a button or link to copy a Mail Merge Field from the page, and be able to paste it into MS-Word.
I've written HTML and Javascript to accomplish this, but it only works in IE. See code at bottom. (I'm using clipboard.js.)
I'm limited by the following:
- It must be idiot proof simple for the end user. Basically a simple click to copy so they can paste it into word.
- No addons.
- No word macros or vb code.
- No keyboard shortcuts EG: ctrl F9
The problem is when I copy from Chrome the html text in the clipboard is different from IE, and it is changing the styles so that when I paste into Word it just sees it as text rather than a field code.
Below are samples of the clipboard html text that I retrieved using a special paste into notepad++.
Internet Explorer
Version:1.0
StartHTML:000000219
EndHTML:000000626
StartFragment:000000350
EndFragment:000000568
StartSelection:000000350
EndSelection:000000568
SourceURL: .../MiniTag.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD></HEAD><BODY><TABLE><TBODY><TR><TD><!--StartFragment--><DIV id="divAccountNumber"><!--StartFragment--><P class="MsoNormal"><SPAN style='mso-field-code: "MERGEFIELD AccountNumber";'><SPAN style="mso-no-proof: yes;">«AccountNumber»</SPAN></SPAN></P><!--EndFragment--></DIV><!--EndFragment--></TD></TR></TBODY></TABLE></BODY></HTML>
Chrome Clipboard
Version:0.9
StartHTML:0000000173
EndHTML:0000000684
StartFragment:0000000209
EndFragment:0000000648
SourceURL: .../MiniTag.html
<html>
<body>
<!--StartFragment--><span style="color: rgb(0, 0, 0); font-family: "Times New Roman"; font-size: medium; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; display: inline !important; float: none;">«AccountNumber»</span><!--EndFragment-->
</body>
</html>
HTML and Javascript Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD></HEAD>
<BODY>
<!-- 1. Define some markup -->
<table>
<tr>
<td><div id="divAccountNumber"></div></td>
<td><button id="btnAccountNumber" class="btn" data-clipboard-action="copy">Copy</button></td>
</tr>
</table>
</pre>
<!-- 2. Include library -->
<script src="./dist/clipboard.min.js"></script>
<!-- 3. Instantiate clipboard -->
<script>
var clipboard = new Clipboard('.btn',{
target: function(trigger){
document.getElementById('divAccountNumber').innerHTML = getMiniHtml();
return document.getElementById('divAccountNumber');
}
});
function getMiniHtml()
{
//« is «
//» is »
//so on UI, mail merge tag will rendered as «AccountNumber»
var tagText = "";
tagText += "<!--StartFragment-->"
tagText += "<p class='MsoNormal'><span style='mso-field-code:\"MERGEFIELD AccountNumber\"'><span style='mso-no-proof:yes'>«AccountNumber»</span></span></p>";
tagText += "<!--EndFragment-->";
return tagText;
}
clipboard.on('success', function(e) {
alert('copied');
console.log(e);
});
clipboard.on('error', function(e) {
alert('error occurred');
console.log(e);
});
</script>
</BODY>
</HTML>