Office 前端外接应用爬坑小记
本人开发word插件应用 js api使用过程中遇到错误的经验和教训，在此记载，如有疑问 多多指教
TaskPaneApp：窗格外接程序
~remoteAppUrl：外接程序的远程Web应用程序的URL
Contoso.GetStarted.Title
Contoso.GetStarted.Title指向 下面ShortString定义的value
设立"严格模式"的目的，主要有以下几个：
-消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;
-消除代码运行的一些不安全之处，保证代码运行的安全；
-提高编译器效率，增加运行速度；
-为未来新版本的Javascript做好铺垫。
"严格模式"体现了Javascript更合理、更安全、更严谨的发展方向，包括IE 10在内的主流浏览器，都已经支持它，许多大项目已经开始全面拥抱它。
另一方面，同样的代码，在"严格模式"中，可能会有不一样的运行结果；一些在"正常模式"下可以运行的语句，在"严格模式"下将不能运行
在进行MicrosoftAjax请求时
var request = new Sys.Net.WebRequest();
request.set_url("http://********");
request.set_httpVerb("POST");
var body ="cmd=***&scode=***&level=***&enc=***"
request.set_body(body);
request.get_headers()["Content-Length"] =body.length
request.add_completed(addParagraphs);
addParagraphs
异常
注释掉严格模式问题解决
注释：MicrosoftAjax详解 http://www.cftea.com/c/2009/05/L8D51N1N8BLHFOWU.asp
现在问题：Ajax请求跨域问题MicrosoftAjax同jq Ajax一样同样存在跨域问题
内嵌网站页面进行数据的请求加载处理 外接应用程序只负责加载页面及 文本的交互
对于office外接应用程序内部网页 与iframe交互 并操作word的功能
在此建立一套通信机制 详情在：iframe跨域通信解决方案
添加引用文献到光标位置api
var range = context.document.getSelection();
range.insertText(text,
Word.InsertLocation.After);//text为需要插入的文本内容
添加图片：inlinePictureObject.insertHtml(html,
insertLocation);
OFFICE内部请求iframe地址的安全拦截问题
原因是默认office内部程序发的根请求是https也就是说~remoteAppUrl是https路径，这样访问对应iframe下内嵌http网址ie的安全机制就会阻止这种混合模式，解决方式1.ie浏览器允许混合模式2.改变xml下remoteAppUrl为http请求，显然我们不能用方案1
--项目属性下 关闭ssl项目F4
--另外也可以用后台方法重定向 一下iframe的src，但是 重定向后 这个iframe里 还会不断发http的资源请求 也会被阻止，导致的效果就是 页面显示元素缺失
Office插件图片的插入html
插入图片
var sourceUrl = this.Url + param.src;
Word.run(function (context) {
var range = context.document.getSelection();
if (param.type == "img") {
range.insertHtml('',Word.InsertLocation.After);
} else if (param.type == "audio") {
range.insertHtml('',Word.InsertLocation.After);
}
}).catch(function (error) {
console.log('Error: ' + JSON.stringify(error));
if (error instanceof OfficeExtension.Error) {
console.log('Debug info: ' +JSON.stringify(error.debugInfo));
}
});
当服务器资源目录移除后 图片便不能使用
资源错误
注：他是一个在线的资源 即URL请求的图片，现在需要改成本地存储base64
/**
*图片转base64
* @param {any} url
* @param {any} callback
* @param {any} outputFormat
*/
function convertImgToBase64(url, callback,outputFormat) {
var canvas = document.createElement('CANVAS'),
ctx = canvas.getContext('2d'),
img = new Image;
img.crossOrigin = 'Anonymous';
img.onload = function () {
canvas.height = img.height;
canvas.width = img.width;
ctx.drawImage(img, 0, 0);
var dataURL = canvas.toDataURL(outputFormat ||'image/png');
callback.call(this, dataURL);
canvas = null;
};
img.src = url;
}
使用
var sourceUrl = this.Url + param.src;
var _ = this;
if (param.type == "img") {
window.convertImgToBase64(sourceUrl, function(base64Img) {//data:image/png;base64,
//range.insertHtml('
+'"/>', Word.InsertLocation.After);不可用
_.cacheImg = base64Img;
Word.run(function (context) {
var range = context.document.getSelection();
//data:image/jpg;base64,
var newBase64Img =
_.cacheImg.substr(_.cacheImg.indexOf(",") + 1, _.cacheImg.length);//从第一个逗号开始截取后面的base64
range.insertInlinePictureFromBase64(newBase64Img,Word.InsertLocation.After);
return context.sync().then(function () {
console.log('PictureFromBase64 added to the beginningof the range.');
});
}).catch(function (error) {
console.log('Error: ' + JSON.stringify(error));
if (error instanceof OfficeExtension.Error) {
console.log('Debug info: ' + JSON.stringify(error.debugInfo));
}
});
});
