案例需求：

替換書簽范圍為指定內容， 類型：文本/文件/圖片/域/剪貼板

擴展：

1.替換書簽中的內容，并且想指定字體
2.不想替換整個書簽，只想在書簽末尾追加內容

案例可能遇到的坑：

暫無

代碼流程

1. 獲取書簽的區域Range 2. 記錄書簽的起始位置和末尾位置 3. 記錄替換前文章的原長度判斷書簽所在的StoryType，常見為正文/文本框/頁眉頁腳。他們對應不同的文章Story。如果是[1正文]記錄文檔Document原先的總長度。[其他]則記錄對應文章中的總字符數StoryLengthWdStoryType[wdMainTextStory|1|正文部分,wdTextFrameStory|5|文本框部分,10、11|頁眉頁腳] 4. 判斷入參type、插入對應的內容 5. 獲取替換后文章的長度 6. 重新設置書簽的范圍，計算書簽的末尾為： 原先書簽末尾 + (替換后文章長度 - 替換前文章長度)

代碼實現

/** * 書簽替換 * @author Li Zuxian * @param {string} bookmarkStr 書簽名 * @param {string} type 替換類型 text:文本 link:文件 pic:圖片 field:域 paste:粘貼 * @param {string} text 替換內容 */ function SetBookMark(bookmarkStr, type, text) {var app = wps.WpsApplication();var doc = wps.WpsApplication().ActiveDocument;var bookmark = doc.Bookmarks.Item(bookmarkStr);if (!bookmark) return "書簽不存在";let bookStart = bookmark.Range.Start;let bookEnd = bookmark.Range.End;let beforeEnd = doc.Range().End;//Range.StoryType -> WdStoryType[wdMainTextStory|1|正文部分,wdTextFrameStory|5|文本框部分,10、11|頁眉頁腳] beforeEnd = /5|10|11/.test(bookmark.Range.StoryType) ? bookmark.Range.StoryLength : beforeEnd;if (!type || type === "text") {bookmark.Range.Text = text;} else if (type === "link") {bookmark.Range.InsertFile(text);} else if (type === "pic") {bookmark.Range.InlineShapes.AddPicture(text);} else if (type === "field") {bookmark.Range.Fields.Item(1).Result.Text = text;return;} else if (type === "paste") {bookmark.Range.Select();app.Selection.PasteAndFormat(16);}let nowEnd = doc.Range().End;let range = bookmark.Range;nowEnd = /5|10|11/.test(range.StoryType) ? bookmark.Range.StoryLength : nowEnd; //文本框是不同的storyif (!doc.Bookmarks.Exists(bookmark.Name)) { //書簽不存在就添加書簽range.SetRange(bookStart, bookEnd + (nowEnd - beforeEnd));doc.Bookmarks.Add(bookmark.Name, range);} else { //書簽存在就刪掉再添加bookmark.Delete();app.Selection.SetRange(bookStart, bookEnd + (nowEnd - beforeEnd));doc.Bookmarks.Add(bookmark.Name, app.Selection.Range);}app.ActiveWindow.Selection.WholeStory();app.ActiveWindow.Selection.EndKey(); }

擴展代碼

1.替換書簽中的內容，并且想指定字體

插入內容改為光標處插入樣式文字的方法

/** * 書簽替換（帶字體樣式） * @author Li Zuxian * @param {string} bookmarkStr 書簽名 * @param {string} text 替換內容 * @param {object} font 字體 json * { * "Name":"微軟雅黑", //字體 * "Bold":true, //粗體 * "Italic":true, //斜體 * "Size":21, //字體大小 * "Color":"#FFF", //顏色的16進制 * "Alignment":"2", //對齊方式 [0居左 1居中 2居右] * "CleaerIndent":true //清除縮進 * } */ function SetBookMark(bookmarkStr, text, font) {var app = wps.WpsApplication();var doc = wps.WpsApplication().ActiveDocument;var bookmark = doc.Bookmarks.Item(bookmarkStr);if (!bookmark) return;let bookStart = bookmark.Range.Start;let bookEnd = bookmark.Range.End;let beforeEnd = doc.Range().End;if (bookmark) {//Range.StoryType -> WdStoryType[wdMainTextStory|1|正文部分,wdTextFrameStory|5|文本框部分,10、11|頁眉頁腳] beforeEnd = /5|10|11/.test(bookmark.Range.StoryType) ? bookmark.Range.StoryLength : beforeEnd;//這里改成樣式插入文字app.Selection.SetRange(bookStart, bookEnd);insertText(text, font);let nowEnd = doc.Range().End;let range = bookmark.Range;nowEnd = /5|10|11/.test(range.StoryType) ? bookmark.Range.StoryLength : nowEnd; //文本框是不同的storyif (!doc.Bookmarks.Exists(bookmark.Name)) { //書簽不存在就添加書簽range.SetRange(bookStart, bookEnd + (nowEnd - beforeEnd));doc.Bookmarks.Add(bookmark.Name, range);} else { //書簽存在就刪掉再添加bookmark.Delete();app.Selection.SetRange(bookStart, bookEnd + (nowEnd - beforeEnd));doc.Bookmarks.Add(bookmark.Name, app.Selection.Range);}app.ActiveWindow.Selection.WholeStory();app.ActiveWindow.Selection.EndKey();} }/** * 光標處插入文本(帶樣式) * @author Li Zuxian * @param str 欲插入的文本內容 * @param font json * { * "Name":"微軟雅黑", //字體 * "Bold":true, //粗體 * "Italic":true, //斜體 * "Size":21, //字體大小 * "Color":"#b50e19", //顏色的16進制 * "Alignment":"2", //對齊方式 [0居左 1居中 2居右] * "CleaerIndent":true //清除縮進 * } */ function insertText(str, font) {let app = wps.WpsApplication();let selection = app.Selection;let start = selection.Range.End;let end;selection.TypeText(str);end = selection.Range.End;app.Selection.SetRange(start, end);if (font) {//字體if (font.Name)selection.Font.Name = font.Name//粗體selection.Font.Bold = font.Bold ? -1 : 0;selection.Font.BoldBi = font.Bold ? -1 : 0;//斜體selection.Font.Italic = font.Italic ? -1 : 0;selection.Font.ItalicBi = font.Italic ? -1 : 0;//大小if (font.Size) {selection.Font.Size = font.Sizeselection.Font.SizeBi = font.Size}//顏色if (font.Color)selection.Font.Color = colorHex2int(font.Color)//對齊if (font.Alignment) {selection.ParagraphFormat.Alignment = font.Alignment}//清除縮進if (font.CleaerIndent) {selection.ParagraphFormat.CharacterUnitFirstLineIndent = 0; //首行縮進 (以字符為單位)selection.ParagraphFormat.CharacterUnitLeftIndent = 0; //左縮進值 (以字符為單位)selection.ParagraphFormat.FirstLineIndent = 0; //首行縮進 (以磅為單位)selection.ParagraphFormat.LeftIndent = 0; //左縮進值 (以磅為單位) }}app.Selection.SetRange(end, end); }/** * 顏色16轉10進制 forWPS * @author Li Zuxian * @param {string} hex * @returns int */ function colorHex2int(hex) {hex = hex.replace(/#/g, "");hex = [hex.substring(4, 6), hex.substring(2, 4), hex.substring(0, 2)].join("");var len = hex.length, a = new Array(len), code;for (var i = 0; i < len; i++) {code = hex.charCodeAt(i);if (48 <= code && code < 58) {code -= 48;} else {code = (code & 0xdf) - 65 + 10;}a[i] = code;}return a.reduce(function (acc, c) {acc = 16 * acc + c;return acc;}, 0); }

2.不想替換整個書簽，只想在書簽末尾追加內容

這里只需要將上面書簽替換中的代碼 app.Selection.SetRange(bookStart, bookEnd)
改為 app.Selection.SetRange(bookEnd, bookEnd) 即可實現，意味插入時直接在書簽末尾插入

/** * 書簽追加 //目前只支持文字追加 * @param {string} bookmarkStr 書簽名 * @param {string} text 替換內容 * @param {object} font 字體 json * { * "Name":"微軟雅黑", //字體 * "Bold":true, //粗體 * "Italic":true, //斜體 * "Size":21, //字體大小 * "Color":"#FFF", //顏色的16進制 * "Alignment":"2", //對齊方式 [0居左 1居中 2居右] * "CleaerIndent":true //清除縮進 * } */ function BookMarkAddmore(bookmarkStr, text, font) {var app = wps.WpsApplication();var doc = wps.WpsApplication().ActiveDocument;var bookmark = doc.Bookmarks.Item(bookmarkStr);if (!bookmark) return;let bookStart = bookmark.Range.Start;let bookEnd = bookmark.Range.End;let beforeEnd = doc.Range().End;if (bookmark) {//Range.StoryType -> WdStoryType[wdMainTextStory|1|正文部分,wdTextFrameStory|5|文本框部分,10、11|頁眉頁腳] beforeEnd = /5|10|11/.test(bookmark.Range.StoryType) ? bookmark.Range.StoryLength : beforeEnd;//這里改成樣式插入文字app.Selection.SetRange(bookEnd, bookEnd);insertText(text, font);let nowEnd = doc.Range().End;let range = bookmark.Range;nowEnd = /5|10|11/.test(range.StoryType) ? bookmark.Range.StoryLength : nowEnd; //文本框是不同的storyif (!doc.Bookmarks.Exists(bookmark.Name)) { //書簽不存在就添加書簽range.SetRange(bookStart, bookEnd + (nowEnd - beforeEnd));doc.Bookmarks.Add(bookmark.Name, range);} else { //書簽存在就刪掉再添加bookmark.Delete();app.Selection.SetRange(bookStart, bookEnd + (nowEnd - beforeEnd));doc.Bookmarks.Add(bookmark.Name, app.Selection.Range);}app.ActiveWindow.Selection.WholeStory();app.ActiveWindow.Selection.EndKey();} } /*** 光標處插入文本(帶樣式)* @author Li Zuxian* @param str 欲插入的文本內容* @param font json * {* "Name":"微軟雅黑", //字體* "Bold":true, //粗體* "Italic":true, //斜體* "Size":21, //字體大小* "Color":"#b50e19", //顏色的16進制* "Alignment":"2", //對齊方式 [0居左 1居中 2居右]* "CleaerIndent":true //清除縮進 * }*/ function insertText(str, font) {let app = wps.WpsApplication();let selection = app.Selection;let start = selection.Range.End;let end;selection.TypeText(str);end = selection.Range.End;app.Selection.SetRange(start, end);if (font) {//字體if (font.Name)selection.Font.Name = font.Name//粗體selection.Font.Bold = font.Bold ? -1 : 0;selection.Font.BoldBi = font.Bold ? -1 : 0;//斜體selection.Font.Italic = font.Italic ? -1 : 0;selection.Font.ItalicBi = font.Italic ? -1 : 0;//大小if (font.Size) {selection.Font.Size = font.Sizeselection.Font.SizeBi = font.Size}//顏色if (font.Color)selection.Font.Color = colorHex2int(font.Color)//對齊if (font.Alignment) {selection.ParagraphFormat.Alignment = font.Alignment}//清除縮進if (font.CleaerIndent) {selection.ParagraphFormat.CharacterUnitFirstLineIndent = 0; //首行縮進 (以字符為單位)selection.ParagraphFormat.CharacterUnitLeftIndent = 0; //左縮進值 (以字符為單位)selection.ParagraphFormat.FirstLineIndent = 0; //首行縮進 (以磅為單位)selection.ParagraphFormat.LeftIndent = 0; //左縮進值 (以磅為單位) }}app.Selection.SetRange(end, end); } /*** 顏色16轉10進制 forWPS* @param {string} hex * @returns int*/ function colorHex2int(hex) {hex = hex.replace(/#/g, "");hex = [hex.substring(4, 6), hex.substring(2, 4), hex.substring(0, 2)].join("");var len = hex.length, a = new Array(len), code;for (var i = 0; i < len; i++) {code = hex.charCodeAt(i);if (48 <= code && code < 58) {code -= 48;} else {code = (code & 0xdf) - 65 + 10;}a[i] = code;}return a.reduce(function (acc, c) {acc = 16 * acc + c;return acc;}, 0); }//-------demo-以下是測試代碼---------- //標題字體 var titleFont = {"Name": "微軟雅黑", //字體"Bold": true, //粗體"Italic": true, //斜體"Size": 18, //字體大小"Color": "#b50e19" //顏色的16進制 } //正文字體 var ContentFont = {"Name": "微軟雅黑", //字體"Bold": false, //粗體"Italic": false, //斜體"Size": 12, //字體大小"Color": "#FFF" //顏色的16進制 } //測試數據 var data = [{ "title": "測試標題1\n", "content": "測試內容1\n" },{ "title": "測試標題2\n", "content": "測試內容2\n" },{ "title": "測試標題3\n", "content": "測試內容3\n" }, ] //插入測試書簽 wps.Application.Selection.Bookmarks.Add("test"); //觸發渲染 function render(data) {data.forEach(d => {BookMarkAddmore("test", d.title, titleFont)BookMarkAddmore("test", d.content, ContentFont)}); } render(data);

總結

以上是生活随笔為你收集整理的【WPS JSAPI加载项】 书签替换功能的实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。