Javascript -Paste from clipboard to specific cell in Excel - javascript

I have a JS function that copies an image from a div onto a clipboard (only in IE) and pastes it into Excel. I would like to know how I can paste the contents of the clipboard into a specific cell in Excel. Here is the JS function code snippet I have. I would like to know how I can paste the clipboard contents into a specific cell
var imgObj = document.getElementById('exportimage');
imgObj.contentEditable = 'true';
var controlRange;
if (document.body.createControlRange)
{
controlRange = document.body.createControlRange();
controlRange.addElement(imgObj);
controlRange.execCommand('Copy');
var objExcel = new ActiveXObject ("Excel.Application");
objExcel.visible = true;
var objWorkbook = objExcel.Workbooks.Add;
var objWorksheet = objWorkbook.Worksheets(1);
objWorksheet.Paste;
}
Copying to clipboard from div, and pasting it into Excel may not be a recommended approach but I would like to get this working for an internal (use only) application

The best you will achieve is pasting to the location where the cell is. You can't insert into the cell. There are other things you may want to do such as insert the image into a comment, or paste an image link, but actually placing the image in the cell isn't going to work.
The closest you can get is to define the Range("A1").Select (or whatever location) and paste to that beginning point. You can also fine tune the location however, so depending on what you are trying to do you can offset from a cell range by specific amounts, if that is what you need.

Related

Add Text at Cursor and Set Headings using Google Apps Script in Docs

Trying to insert specific text at my cursor to a Google Doc via a custom menu created via Google Apps Script. I am then trying to format that text to specific headings, body, etc. The below code is not working and is inserting all text with the same format as the surrounding text within the Google Doc. I have tried a number of different methods to accomplish this but am hoping for some help or tips!
Custom Google Doc Menu
Expected Result
Actual Result
function menuItem12() {
var cursor = DocumentApp.getActiveDocument().getCursor();
var headerAttr = {}
headerAttr[DocumentApp.Attribute.HEADING] = DocumentApp.ParagraphHeading.HEADING2;
var bodyAttr = {}
bodyAttr[DocumentApp.Attribute.HEADING] = DocumentApp.ParagraphHeading.NORMAL;
var text = cursor.insertText("Resource Link");
text.setLinkUrl("https://www.google.com");
var header = cursor.insertText("Resource Heading\n");
header.editAsText().setAttributes(0, header.getText().length, headerAttr);
DocumentApp.getUi().alert('Resources added.');
}

javascript copy content of a div into clipboard from a canvas doesn't work on Firefox

I need to copy the content of a popup into the clipboard as is inside a canvas (it's Openlayer 4 stuff, you add an overlay to the map and then you can use a div to parse it as a content once is created) and is not directly accessible.
to display the popup you need to click on a street restriction.
here the project:
https://www.traffwebdev.uk/parking/test.html
This code works in Chrome, Internet explorer and in Edge but not in Firefox.
Here the code I'm using to copy the content into the clipboard:
const copyEv = () => {
let max = ''
if ($('#numofdivs').length > 0) {
max = $('#numofdivs').val()
}
else {
max = $('#popup-content').children().length
}
for (let i = 0; i < max; i++) {
document.getElementById(`Copy_Btn_${i}`).addEventListener('click', () => {
// We will need a range object and a selection.
let contentHolder = document.getElementById(`info_${i}`)
let range = document.createRange()
let selection = window.getSelection()
// Clear selection from any previous data.
selection.removeAllRanges()
// Make the range select the entire content of the contentHolder paragraph.
range.selectNodeContents(contentHolder)
// Add that range to the selection.
selection.addRange(range)
// Copy the selection to clipboard.
document.execCommand('copy')
// Clear selection if you want to.
selection.removeAllRanges()
})
}
}
I found a different method but neither is working, in the codepen is working and if I modify the text to copy with the content of the popup also is working (you can inspect the popup and copy the whole info_0 in the codepen) but in a real life doesn't work.
https://codepen.io/chriscoyier/pen/OXAwvq
The copyEv function is called after the popup is displayed on the map with a delay of 300ms to make sure the popup is shown
The code is converted with webpack once is on production.
Try this: make the element containing the text editable by adding the contenteditable attribute prior to selecting/copying text. You can remove the attribute just after the copy command is executed.
Firefox is finicky about selecting content from non-content-editable elements in the DOM.

How to "copy/paste" a subgraph -- JointJS

I try to add a copy paste option in my program but links doesn't come with.
All my blocks are well copied but my links aren't.
var copied;
$("#copy").click(function(){
var papa = block_menu.model; //clicked element
var copied_cells=papa.clone({deep:true}); //take all embedded cells
copied=graph.getSubgraph(copied_cells, {deep:true}); //copy
});
$("#paste").click(function(){
graph.addCells(copied); //paste (add on graph)
});
I've tried to add this before "copied = ...." but that doesn't change anything :
var copied_cells = graph.getSubgraph(copied_cells)
`
Does someone nows how to copy my links with?
Thanks.
cells should be sorted before you're putting them back into graph. Elements first, then links. addCells has been adding cells as it is, so if there is link whose target/source is not in the graph yet, this link won't be added.

How to fix cursor position when prevent browser's default paste action

There is a custom method to insert HTML(html fragment not just plain text) into an editor (Rich Text Editor), but for some reason I have to use e.preventDefault to prevent browser default paste action and insert the copy data later. My code looks like below:
editor.addEventListener('paste', function(e) {
var data = e.clipboardData.getData('text/html'),
newData;
e.preventDefault();
newData = custom.handle(data);
custom.insert(newData);
}, false);
After custom.insert(newData), cursor is still blinking at the origin position. I expected it to have moved the end of newData.
Can anybody help me fix that?
Your question may already have an answer here:
Use JavaScript to place cursor at end of text in text input element
Set focus and cursor to end of text input field / string w. Jquery
With Mike Berrow's example, you can replace the input value with itself to set the carret to the end of the input. This would seem to be the most reliable way to do it, event if it is slightly hackish.
myInput.value = myInput.value;
With browsers that support it, you can rather use the setSelectionRange method. Since you already use clipboardData, this shouldn't be a problem.
myInput.setSelectionRange(myInput.value.length, myInput.value.length);
Pay attention to the fact that the value length may be harder to get if you are working with a textarea.
https://developer.mozilla.org/fr/docs/Web/API/HTMLInputElement/setSelectionRange
I don't know what properties of functions your custom has, but you can use this the code to move the cursor to the end of the text in an input and textarea:
custom.selectionStart = custom.selectionEnd;
If newData is pasted in the middle or beginning of the text, then you will have to calculate the length of newData and move the cursor by that many characters. Something like:
custom.selectionStart = custom.selectionStart + newData.length;
custom.selectionEnd = custom.selectionStart;
Edit to answer your question: How to calculate the length of text with HTML tags?
Well, this will be a bit tricky. You can create a temporary HTML element in memory, add the newData in it, and calculate the length of its innerText property. Something like this:
var temp = document.createElement("div");
temp.innerHTML = newData;
custom.selectionStart = custom.selectionStart + temp.innerText.length;
custom.selectionEnd = custom.selectionStart;
Note: innerText is was introduced by Microsoft and is not a W3C standard. The implementation varies across browsers although most replicate IE's behavior. innerText is style-aware and will only return the visible text.

Simplest way to filter text copied from a web page using JavaScript

I have a web page where the text has ­ characters (= soft hyphens) and other unusual entities mixed in. While these entities are necessary for correct display of the page, I would like to filter them out of text copied from the page to the clipboard.
1) Is this possible with JavaScript? I’m familiar with the onCopy event, but the examples I’ve seen don’t make the copied text available for further processing.
2) If so, what is the simplest way to accomplish it?
What I can’t do:
a) Change the characters in the web page at the server side.
b) Install JQuery or another JS framework just for this one function.
For a while, I thought that it was impossible to do it with JS only, but you can! You need to use the oncopy event handler, and change the selection to a temporary div containing the filtered text.
Here is an example:
function copyHandler() {
//Get the selected text
var selection = window.getSelection(),
// Filter it
newText = filterText( selection ),
// Create a div
newdiv = document.createElement('div');
// Hide it
newdiv.style.position = 'absolute';
newdiv.style.left = '-99999px';
// Insert the div in the body
document.body.appendChild(newdiv);
// Put the text in it
newdiv.innerHTML = newText;
// Select what's in the div
selection.selectAllChildren(newdiv);
// When the copy is over, remove the temporary div
window.setTimeout(function () {
document.body.removeChild(newdiv);
}, 100);
}
document.addEventListener('copy', copyHandler);
function filterText(txt){
/* Do whatever you want here */
/* To show that it's working, I'll just return that string every time */
return 'I\'m a filtered String!';
}
JS Fiddle Demo
Try copy / pasting text in the Fiddle.

Categories