Office 前端外接應用爬坑小記


本人開發(fā)word插件應用 js api使用過程中遇到錯誤的經(jīng)驗和教訓,在此記載,如有疑問 多多指教


TaskPaneApp:窗格外接程序

~remoteAppUrl:外接程序的遠程Web應用程序的URL

Contoso.GetStarted.Title

Contoso.GetStarted.Title指向 下面ShortString定義的value



設立"嚴格模式"的目的,主要有以下幾個:

-消除Javascript語法的一些不合理、不嚴謹之處,減少一些怪異行為;

-消除代碼運行的一些不安全之處,保證代碼運行的安全;

-提高編譯器效率,增加運行速度;

-為未來新版本的Javascript做好鋪墊。

"嚴格模式"體現(xiàn)了Javascript更合理、更安全、更嚴謹?shù)陌l(fā)展方向,包括IE 10在內的主流瀏覽器,都已經(jīng)支持它,許多大項目已經(jīng)開始全面擁抱它。

另一方面,同樣的代碼,在"嚴格模式"中,可能會有不一樣的運行結果;一些在"正常模式"下可以運行的語句,在"嚴格模式"下將不能運行

在進行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

現(xiàn)在問題:Ajax請求跨域問題MicrosoftAjax同jq Ajax一樣同樣存在跨域問題

內嵌網(wǎng)站頁面進行數(shù)據(jù)的請求加載處理 外接應用程序只負責加載頁面及 文本的交互


對于office外接應用程序內部網(wǎng)頁 與iframe交互 并操作word的功能

在此建立一套通信機制 詳情在:iframe跨域通信解決方案


添加引用文獻到光標位置api

var range = context.document.getSelection();

range.insertText(text,

Word.InsertLocation.After);//text為需要插入的文本內容

https://github.com/OfficeDev/office-js-docs/blob/29c3476c05ad916faa4eb7dd20b272a3a7dbcc05/reference/word/range.md#gettextrangesendingmarks-string-trimspacing-bool


添加圖片:inlinePictureObject.insertHtml(html,

insertLocation);


OFFICE內部請求iframe地址的安全攔截問題

原因是默認office內部程序發(fā)的根請求是https也就是說~remoteAppUrl是https路徑,這樣訪問對應iframe下內嵌http網(wǎng)址ie的安全機制就會阻止這種混合模式,解決方式1.ie瀏覽器允許混合模式2.改變xml下remoteAppUrl為http請求,顯然我們不能用方案1

--項目屬性下 關閉ssl項目F4

--另外也可以用后臺方法重定向 一下iframe的src,但是 重定向后 這個iframe里 還會不斷發(fā)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請求的圖片,現(xiàn)在需要改成本地存儲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));

}

});

});


最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

  • 工廠模式類似于現(xiàn)實生活中的工廠可以產生大量相似的商品,去做同樣的事情,實現(xiàn)同樣的效果;這時候需要使用工廠模式。簡單...
    舟漁行舟閱讀 8,131評論 2 17
  • H5 meta詳解 viewport width:控制 viewport 的大小,可以指定的一個值,如果 600,...
    FConfidence閱讀 891評論 0 3
  • <a name='html'>HTML</a> Doctype作用?標準模式與兼容模式各有什么區(qū)別? (1)、<...
    clark124閱讀 3,838評論 1 19
  • HTML HTML5標簽 媒體查詢head部分寫法 Doctype作用? 嚴格模式與混雜模式如何區(qū)分?它們有何意義...
    Mayo_閱讀 719評論 0 8
  • 寫這篇分析的背景是,工作上正在經(jīng)歷一個智能調度平臺的搭建和設計,希望通過對于滴滴調度系統(tǒng)進行調研,來得出一些可借鑒...
    支付寶成都團隊閱讀 40,409評論 2 86

友情鏈接更多精彩內容