Last active
June 1, 2021 09:50
-
-
Save theboyknowsclass/7fccdcd27f776d8a5468877b5b544d5d to your computer and use it in GitHub Desktop.
Word - Write and Read SVG
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
name: Word - Write and Read SVG | |
description: Word - Write and Read SVG | |
host: WORD | |
api_set: {} | |
script: | |
content: | | |
$("#insert").click(() => tryCatch(insertSvg)); | |
$("#insertPng").click(() => tryCatch(insertPng)); | |
$("#clonePng").click(() => tryCatch(clonePng)); | |
$("#getData").click(() => tryCatch(getDataviaContentControls)); | |
$("#getApiSupport").click(() => tryCatch(getApiSupport)); | |
$("#delete").click(() => tryCatch(deleteFirst)); | |
$("#replace").click(() => tryCatch(replace)); | |
$("#readXml").click(() => tryCatch(readXml)); | |
var id = 0; | |
var message = ""; | |
function getApiSupport() { | |
var apiVersion; | |
var apiName; | |
apiName = "CoercionType"; | |
apiVersion = "1.2"; | |
if (Office.context.requirements.isSetSupported(apiName, apiVersion)) { | |
console.log(apiVersion); | |
} else { | |
console.log("not supported"); | |
} | |
} | |
let replace = async () => { | |
var id = window.prompt("enter id to replace"); | |
await Word.run(async (context) => { | |
const pictures = context.document.body.inlinePictures; | |
context.load(pictures, "items, items/width, items/length, items/altTextDescription"); | |
return context.sync().then(function() { | |
message = "selection"; | |
pictures.items[id].select(); | |
write(message); | |
}); | |
}); | |
insertSvg2(); | |
}; | |
let readXml = async () => { | |
var id = window.prompt("enter id to read"); | |
await Word.run(async (context) => { | |
const pictures = context.document.body.inlinePictures; | |
context.load(pictures, "items, items/width, items/length, items/altTextDescription"); | |
return context.sync().then(function() { | |
message = "selection"; | |
pictures.items[id].select(); | |
write(message); | |
}); | |
}); | |
getDataviaCommonApi(); | |
}; | |
function deleteFirst() { | |
Word.run(async (context) => { | |
const pictures = context.document.body.inlinePictures; | |
context.load(pictures, "items"); | |
return context.sync().then(function() { | |
message = "delete"; | |
pictures.items[0].delete(); | |
write(message); | |
}); | |
}); | |
} | |
function getDataviaCommonApi() { | |
Office.context.document.getSelectedDataAsync(Office.CoercionType.Ooxml, function(asyncResult) { | |
if (asyncResult.status == Office.AsyncResultStatus.Failed) { | |
write("Action failed. Error: " + asyncResult.error.message); | |
} else { | |
write("Selected data: " + asyncResult.value); | |
} | |
}); | |
} | |
function getDataviaInlinePictures() { | |
Word.run(async (context) => { | |
const pictures = context.document.body.inlinePictures; | |
context.load(pictures, "items, items/width, items/length, items/altTextDescription"); | |
return context.sync().then(function() { | |
message = ""; | |
pictures.items.forEach(getPictureData); | |
write(message); | |
}); | |
}); | |
} | |
function getDataviaContentControls() { | |
Word.run(async (context) => { | |
const contentControls = context.document.body.contentControls; | |
context.load(contentControls, "items, items/id"); | |
return context.sync().then(function() { | |
message = ""; | |
contentControls.items.forEach(getContentControlData); | |
write(message); | |
}); | |
}); | |
} | |
function getPictureData(item: Word.InlinePicture, index: number) { | |
message += "id of item " + index + ": " + item.altTextDescription + "\n"; | |
message += "size: width " + item.width + " : height " + item.height + "\n"; | |
//message += range.text + "\n"; | |
message += "\n"; | |
} | |
function getContentControlData(item: Word.ContentControl, index: number) { | |
message += "id of item " + index + ": " + item.id + "\n"; | |
//message += range.text + "\n"; | |
message += "\n"; | |
} | |
function insertSvg() { | |
Office.context.document.setSelectedDataAsync( | |
getSvg(), | |
{ | |
coercionType: Office.CoercionType.XmlSvg | |
}, | |
function(asyncResult) { | |
if (asyncResult.status === Office.AsyncResultStatus.Failed) { | |
console.log("Action failed with error: " + asyncResult.error.message); | |
} else { | |
write("added via Common API"); | |
} | |
} | |
); | |
} | |
function insertSvg2() { | |
Office.context.document.setSelectedDataAsync( | |
getsvg2(), | |
{ | |
coercionType: Office.CoercionType.XmlSvg | |
}, | |
function(asyncResult) { | |
if (asyncResult.status === Office.AsyncResultStatus.Failed) { | |
console.log("Action failed with error: " + asyncResult.error.message); | |
} else { | |
write("added via Common API"); | |
} | |
} | |
); | |
} | |
async function clonePng() { | |
let image = ""; | |
message = ""; | |
await Word.run(async (context) => { | |
const contentControl = context.document.body.contentControls.getFirst(); | |
contentControl.load("id, inlinePictures"); | |
await context.sync(); | |
message += "cloning first item - id: " + contentControl.id.toString(); | |
write(message); | |
const inlinePicture = contentControl.inlinePictures.getFirst(); | |
const base64 = inlinePicture.getBase64ImageSrc(); | |
await context.sync(); | |
image = base64.value; | |
}); | |
await InsertPngViaWordContentControls(image); | |
} | |
async function insertPng() { | |
const image = getImageAsBase64String(); | |
await InsertPngViaWordContentControls(image); | |
} | |
async function InsertPngViaWordContentControls(pngString: string) { | |
// Traverses each paragraph of the document and wraps a content control on each with either a even or odd tags. | |
await Word.run(async (context) => { | |
console.log("inserting..."); | |
let inline = context.document.body.inlinePictures; | |
let contentControl = context.document.body.insertInlinePictureFromBase64(pngString, "Start").insertContentControl(); | |
contentControl.title = "Anaplan Content"; | |
contentControl.color = "#3c67ea"; | |
await context.sync().then(async function() { | |
contentControl.load("id"); | |
await context.sync(); | |
write("inserted id: " + contentControl.id.toString()); | |
}); | |
}); | |
//Content control id is a number but we will store and use as a string. For refresh we will have to parse as int when using .getById() | |
} | |
/** Default helper for invoking an action and handling errors. */ | |
async function tryCatch(callback) { | |
try { | |
await callback(); | |
} catch (error) { | |
// Note: In a production add-in, you'd want to notify the user through your add-in's UI. | |
console.error(error); | |
} | |
} | |
// Function that writes to a div with id='message' on the page. | |
function write(message) { | |
document.getElementById("message").innerText = message; | |
} | |
function getsvg2() { | |
return '<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" id="deadbeef"><circle cx="50" cy = "50" r = "50" /></svg>'; | |
} | |
function getSvg() { | |
// A production add-in code could get an image from an | |
// online source and pass it to a library function that | |
// converts to base 64. | |
var svg = | |
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 100 100" id="boobies"> <title>SVG Logo</title> <a xlink:href="http://www.w3.org/Graphics/SVG/" target="_parent" xlink:title="W3C SVG Working Group home page"> <rect id="background" fill="#FF9900" width="100" height="100" rx="4" ry="4"/> <rect id="top-left" fill="#FFB13B" width="50" height="50" rx="4" ry="4"/> <rect id="bottom-right" x="50" y="50" fill="#DE8500" width="50" height="50" rx="4" ry="4"/> <g id="circles" fill="#FF9900"> <circle id="n" cx="50" cy="18.4" r="18.4"/> <circle id="ne" cx="72.4" cy="27.6" r="18.4"/> <circle id="e" cx="81.6" cy="50" r="18.4"/> <circle id="se" cx="72.4" cy="72.4" r="18.4"/> <circle id="s" cx="50" cy="81.6" r="18.4"/> <circle id="sw" cx="27.6" cy="72.4" r="18.4"/> <circle id="w" cx="18.4" cy="50" r="18.4"/> <circle id="nw" cx="27.6" cy="27.6" r="18.4"/> </g> <g id="stars"> <path id="black-star" d="M 63.086, 18.385 c 0.000, -7.227 -5.859,-13.086 -13.100,-13.086 c -7.235, 0.000 -13.096, 5.859 -13.096, 13.086 c -5.100, -5.110 -13.395, -5.110 -18.497, 0.000 c -5.119, 5.120 -5.119, 13.408 0.000, 18.524 c -7.234, 0.000 -13.103, 5.859 -13.103, 13.085 c 0.000, 7.230 5.870, 13.098 13.103, 13.098 c -5.119, 5.110 -5.119, 13.395 0.000, 18.515 c 5.102, 5.104 13.397, 5.104 18.497, 0.000 c 0.000, 7.228 5.860, 13.083 13.096, 13.083 c 7.240, 0.000 13.100, -5.855 13.100,-13.083 c 5.118, 5.104 13.416, 5.104 18.513, 0.000 c 5.101, -5.120 5.101,-13.410 0.000,-18.515 c 7.216, 0.000 13.081, -5.869 13.081,-13.098 c 0.000, -7.227 -5.865,-13.085 -13.081,-13.085 c 5.101, -5.119 5.101,-13.406 0.000,-18.524 C 76.502, 13.275 68.206, 13.275 63.086, 18.385 z"/> <path id="white-star" fill="#FFFFFF" d="M 55.003, 23.405 v 14.488 L 65.260, 27.640 c 0.000, -1.812 0.691,-3.618 2.066, -5.005 c 2.780, -2.771 7.275,-2.771 10.024, 0.000 c 2.771, 2.766 2.771, 7.255 0.000, 10.027 c -1.377, 1.375 -3.195, 2.072 -5.015, 2.072 L 62.101, 44.982 H 76.590 c 1.290, -1.280 3.054,-2.076 5.011, -2.076 c 3.900, 0.000 7.078, 3.179 7.078, 7.087 c 0.000, 3.906 -3.178, 7.088 -7.078, 7.088 c -1.957, 0.000 -3.721,-0.798 -5.011, -2.072 H 62.100 l 10.229, 10.244 c 1.824, 0.000 3.642, 0.694 5.015, 2.086 c 2.774, 2.759 2.774, 7.250 0.000, 10.010 c -2.750, 2.774 -7.239, 2.774 -10.025, 0.000 c -1.372, -1.372 -2.064,-3.192 -2.064, -5.003 L 55.000, 62.094 v 14.499 c 1.271, 1.276 2.084, 3.054 2.084, 5.013 c 0.000, 3.906 -3.177, 7.077 -7.098, 7.077 c -3.919, 0.000 -7.094,-3.167 -7.094, -7.077 c 0.000, -1.959 0.811,-3.732 2.081, -5.013 V 62.094 L 34.738, 72.346 c 0.000, 1.812 -0.705, 3.627 -2.084, 5.003 c -2.769, 2.772 -7.251, 2.772 -10.024, 0.000 c -2.775, -2.764 -2.775,-7.253 0.000,-10.012 c 1.377, -1.390 3.214,-2.086 5.012, -2.086 l 10.257,-10.242 H 23.414 c -1.289, 1.276 -3.072, 2.072 -5.015, 2.072 c -3.917, 0.000 -7.096,-3.180 -7.096, -7.088 s 3.177, -7.087 7.096,-7.087 c 1.940, 0.000 3.725, 0.796 5.015, 2.076 h 14.488 L 27.646, 34.736 c -1.797, 0.000 -3.632,-0.697 -5.012, -2.071 c -2.775, -2.772 -2.775,-7.260 0.000,-10.027 c 2.773, -2.771 7.256,-2.771 10.027, 0.000 c 1.375, 1.386 2.083, 3.195 2.083, 5.005 l 10.235, 10.252 V 23.407 c -1.270, -1.287 -2.082,-3.053 -2.082, -5.023 c 0.000, -3.908 3.175,-7.079 7.096, -7.079 c 3.919, 0.000 7.097, 3.168 7.097, 7.079 C 57.088, 20.356 56.274,22.119 55.003, 23.405 z"/> </g> <g id="svg-textbox"> <path id="text-backdrop" fill="black" d="M 5.30,50.00 H 94.68 V 90.00 Q 94.68,95.00 89.68,95.00 H 10.30 Q 5.30,95.00 5.30,90.00 Z"/> <path id="shine" fill="#3F3F3F" d="M 14.657,54.211 h 71.394 c 2.908, 0.000 5.312, 2.385 5.312, 5.315 v 17.910 c -27.584,-3.403 -54.926,-8.125 -82.011,-7.683 V 59.526 C 9.353,56.596 11.743,54.211 14.657,54.211 L 14.657,54.211 z"/> <g id="svg-text"> <title>SVG</title> <path id="S" fill="#FFFFFF" stroke="#000000" stroke-width="0.5035" d="M 18.312,72.927 c -2.103,-2.107 -3.407, -5.028 -3.407, -8.253 c 0.000,-6.445 5.223,-11.672 11.666,-11.672 c 6.446, 0.000 11.667, 5.225 11.667, 11.672 h -6.832 c 0.000,-2.674 -2.168, -4.837 -4.835, -4.837 c -2.663, 0.000 -4.838, 2.163 -4.838, 4.837 c 0.000, 1.338 0.549, 2.536 1.415, 3.420 l 0.000, 0.000 c 0.883, 0.874 2.101, 1.405 3.423, 1.405 v 0.012 c 3.232, 0.000 6.145, 1.309 8.243, 3.416 l 0.000, 0.000 c 2.118, 2.111 3.424, 5.034 3.424, 8.248 c 0.000, 6.454 -5.221, 11.680 -11.667, 11.680 c -6.442, 0.000 -11.666, -5.222 -11.666,-11.680 h 6.828 c 0.000, 2.679 2.175, 4.835 4.838, 4.835 c 2.667, 0.000 4.835, -2.156 4.835, -4.835 c 0.000,-1.329 -0.545, -2.527 -1.429, -3.407 l 0.000, 0.000 c -0.864,-0.880 -2.082, -1.418 -3.406, -1.418 l 0.000, 0.000 C 23.341,76.350 20.429, 75.036 18.312, 72.927 L 18.312,72.927 L 18.312,72.927 z"/> <polygon id="V" fill="#FFFFFF" stroke="#000000" stroke-width="0.5035" points="61.588,53.005 53.344,92.854 46.494,92.854 38.236,53.005 45.082,53.005 49.920,76.342 54.755,53.005"/> <path id="G" fill="#FFFFFF" stroke="#000000" stroke-width="0.5035" d="M 73.255,69.513 h 11.683 v 11.664 l 0.000, 0.000 c 0.000, 6.452 -5.226,11.678 -11.669, 11.678 c -6.441, 0.000 -11.666,-5.226 -11.666,-11.678 l 0.000, 0.000 V 64.676 h -0.017 C 61.586,58.229 66.827,53.000 73.253, 53.000 c 6.459, 0.000 11.683, 5.225 11.683, 11.676 h -6.849 c 0.000,-2.674 -2.152,-4.837 -4.834, -4.837 c -2.647, 0.000 -4.820, 2.163 -4.820, 4.837 v 16.501 l 0.000, 0.000 c 0.000, 2.675 2.173, 4.837 4.820, 4.837 c 2.682, 0.000 4.834,-2.162 4.834, -4.827 v -0.012 v -4.827 h -4.834 L 73.255,69.513 L 73.255,69.513 z"/> </g> </g> </a></svg>'; | |
return svg; | |
} | |
function getImageAsBase64String() { | |
return "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"; | |
} | |
language: typescript | |
template: | |
content: "<section class=\"ms-font-m\">\n\t<p>This sample shows how to insert an SVG image using an XML string as the source.</p>\n</section>\n\n<section class=\"samples ms-font-m\">\n\t<h3>Try it out</h3>\n\t<button id=\"insert\" class=\"ms-Button\">\n <span class=\"ms-Button-label\">Insert new SVG</span>\n </button>\n\t<button id=\"insertPng\" class=\"ms-Button\">\n\t\t <span class=\"ms-Button-label\">Insert new Png</span>\n\t\t </button>\n\t\t\t<button id=\"clonePng\" class=\"ms-Button\">\n\t\t\t\t\t <span class=\"ms-Button-label\">Clone first Png</span>\n\t\t\t\t\t </button>\n\t<button id=\"getData\" class=\"ms-Button\">\n\t\t<span class=\"ms-Button-label\">Get Data on Inserted SVGs</span>\n\t</button>\n\t<button id=\"getApiSupport\" class=\"ms-Button\">\n\t\t<span class=\"ms-Button-label\">Get Api Support</span>\n\t</button>\n\t<button id=\"delete\" class=\"ms-Button\">\n\t\t<span class=\"ms-Button-label\">Delete First Inline Picture</span>\n\t</button>\n\t<button id=\"replace\" class=\"ms-Button\">\n\t\t<span class=\"ms-Button-label\">Replace Svg</span>\n\t</button>\n\t<button id=\"readXml\" class=\"ms-Button\">\n\t\t<span class=\"ms-Button-label\">Read OOXML</span>\n\t</button>\n\t<h5 id=\"message\">\n\n\t</h5>\n</section>" | |
language: html | |
style: | |
content: |- | |
section.samples { | |
margin-top: 20px; | |
} | |
section.samples .ms-Button, section.setup .ms-Button { | |
display: block; | |
margin-bottom: 5px; | |
margin-left: 20px; | |
min-width: 80px; | |
} | |
language: css | |
libraries: | | |
https://appsforoffice.microsoft.com/lib/1/hosted/office.js | |
@types/office-js | |
office-ui-fabric-js@1.4.0/dist/css/fabric.min.css | |
office-ui-fabric-js@1.4.0/dist/css/fabric.components.min.css | |
core-js@2.4.1/client/core.min.js | |
@types/core-js | |
jquery@3.1.1 | |
@types/jquery@3.3.1 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment