近在工作中遇到一個bug,將word轉換成html,轉換成功之后在瀏覽器中打開其中圖片不顯示,使用img標簽,src指定圖片相對地址又是能顯示的,排除圖片問題。
網上能搜索到的demo
打開轉碼之后的html代碼發現,生成的是vml圖片標簽,這個在IE9以后就不支持了,更別說現在的主流瀏覽器了。
生成的html中使用的是vml標簽
將這個跟大佬分析分析,各種文檔一查,咔咔咔大致分析出問題所在。原來jacob使用的是word本身自帶的功能,相當于把word打開另存為html,于是手動將word轉為html試了一下,果然效果與代碼轉換一致,這時候注意到word另存為時有一個web選項,里面有個使用vml渲染圖片默認是選中的,去掉這個選項,再次生成,圖片正常顯示。
到這里基本已經確定了問題的解決思路,另存為時不勾選這個選項,那么問題來了,怎么利用jacob操作另存為時去掉這個選項呢,想去搜搜看jacob相關的文檔,結果不知道是不是因為這個很老了,網上大多數都是demo,根本沒有相關的文檔可看,Github上也是只言片語,根本無從查起。
jacob github 地址:https://github.com/joval/jacob
微軟官網文檔
官方文檔連接:https://docs.microsoft.com/zh-cn/office/vba/api/word.weboptions.relyonvml
微軟官網查詢相關文檔,發現其實是可以關閉的,于是代碼變成這樣
關閉relyOnVml
再次運行程序,這次轉出來的html就能在瀏覽器打開了。
總結,在這次解決問題的過程中,學會了往更深層次去想問題,找對方向,迎難而上。
記錄一下這個問題解決的經驗,也希望能幫到同樣遇到這個問題的人。
用Spire.Doc,可以輕松地將HTML插入到Word文檔中。下面是一個示例代碼:
import com.spire.doc.Document;
import com.spire.doc.FileFormat;
import com.spire.doc.Section;
import com.spire.doc.documents.HorizontalAlignment;
import com.spire.doc.fields.DocPicture;
import com.spire.doc.fields.HtmlLayoutType;
import com.spire.doc.fields.TextRange;
import java.io.*;
public class HtmlToWord {
public static void main(String[] args) throws Exception {
//定義文檔對象
Document doc=new Document();
//添加一個段落
Section section=doc.addSection();
TextRange tr=section.addParagraph().appendText("下面是插入HTML到Word的示例:");
tr.getCharacterFormat().setBold(true);
tr.getCharacterFormat().setFontSize(16f);
//定義HTML內容
String htmlContent="<html><body><h1>Hello, World!</h1><p>This is an example of inserting HTML into a Word document using Spire.Doc.</p></body></html>";
//插入HTML到Word
DocPicture htmlPicture=section.addParagraph().appendPicture(
htmlContent.getBytes(), HtmlLayoutType.Inline);
htmlPicture.setHorizontalPosition(0);
htmlPicture.setVerticalPosition(30);
htmlPicture.setWidth(520);
htmlPicture.setHeight(520 * 9 / 16);
//設置段落格式
section.getParagraphFormat().setHorizontalAlignment(HorizontalAlignment.Center);
//保存為Word文檔
doc.saveToFile("HtmlToWord.docx", FileFormat.Docx);
System.out.println("Word文檔已生成。");
}
}
在上面的代碼中,我們首先定義一個文檔對象并添加一個段落。然后定義HTML內容,并使用 appendPicture 方法將HTML插入到Word文檔中。 HtmlLayoutType 枚舉類型可用于指定HTML的布局方式。最后,我們設置了段落格式并將文檔保存為Word格式。在輸出語句中,我們打印了一條消息以通知用戶生成文檔的完成。
AVA中將WORD轉換為HTML導入到CKEDITOR編輯器中(解決圖片問題,樣式,非常完美),ckeditor粘貼word,ckeditor3粘貼word,ckeditor4粘貼word,ckeditor5粘貼word內容,ckeditor復制word圖片,ckeditor復制粘貼word圖片,ckeditor復制word內容,ckeditor粘貼word圖片,復制word圖片粘貼到ckeditor,
前端用了VUE2,VUE3,React,HTML5,也是一個新項目,為了方便用的這些框架,實際上這個是無所謂,功能的實現和前端這些框架沒什么關系。
后端用了PHP,JSP,ASP,ASP.NET,SpringBoot,功能實現和后端用的什么開發語言無關,后端只提供一個文件上傳的接口,HTTP form協議,圖片上傳時會調這個接口。
編輯器是ckeditor5,為ckeditor編輯器增加粘貼Word圖片的功能,支持快捷鍵操作(Ctrl+V),支持多種系統:Windows,macOS,Linux,信創國產化環境,中標麒麟,銀河麒麟,統信,龍芯。
支持word粘貼,word內容粘貼,word圖文粘貼,word圖片粘貼,粘貼后圖片能夠自動上傳到服務器中,然后將圖片和內容HTML添加到編輯器中,上傳接口地址能夠自定義
用戶使用操作起來更方便一些,一般發新聞,或者發文章用的比較多,基本上每天發新聞,發文章都會用到,
這個功能確實為用戶帶來了方便。
主要步驟如下:
1.上傳WordPaster文件夾
一般將WordPaster.cab放在WordPaster目錄下。
2.上傳CKEditor插件目錄
3.引入JS,初始化控件
注意:不要重復引入jquery,如果您的項目已經引入了jq,則不用再引入jq-1.4
如果希望添加到默認工具欄中,請修改ckeditor.js,在toolbar_Full中增加imagepaster,netpaster
為ckeditor增加插件(imagepaster,netpaster,pptpaster,pdfimport):
注意:
1.如果接口字段名稱不是file,請配置FileFieldName。ueditor接口中使用的upfile字段
參考:http://www.ncmem.com/doc/view.aspx?id=c3ad06c2ae31454cb418ceb2b8da7c45
2.如果接口返回JSON,請配置ImageMatch
參考:http://www.ncmem.com/doc/view.aspx?id=07e3f323d22d4571ad213441ab8530d1
3.如果接口返回的圖片地址沒有域名,請配置ImageUrl
參考:http://www.ncmem.com/doc/view.aspx?id=704cd302ebd346b486adf39cf4553936
4.如果接口有權限驗證(登陸驗證,SESSION驗證),請配置COOKIE。或取消權限驗證。
參考:http://www.ncmem.com/doc/view.aspx?id=8602DDBF62374D189725BF17367125F3
常見問題:
1.為什么整合到項目中圖片無法上傳?
請先測試接口:http://www.ncmem.com/doc/view.aspx?id=61f361025c9247098f6a15c3dfc53db5
*請認真填寫需求信息,我們會在24小時內與您取得聯系。