2013-03-04 4 views
0

JavaScript (IE 전용)의 ActiveXObject를 사용하여 Word 문서에서 이미지를 추출하려고합니다. JavaScript를 사용하여 Word 문서에서 이미지를 추출하는 방법은 무엇입니까?

내가 Word 개체에 대한 API 참조, 인터넷 주위에서 불과 몇 힌트를 찾을 수 없습니다 :

var filename = 'path/to/word/doc.docx' 
var word = new ActiveXObject('Word.Application') 
var doc = w.Documents.Open(filename) 
// Displays the text 
var docText = doc.Content 

어떻게 doc.Content 같은 것을 사용하여 워드 문서에서 이미지에 액세스 할 것인가?

또한 누구나 API가 도움이 될만한 확실한 출처 ​​(Microsoft 출신)가있는 경우.

+0

http://msdn.microsoft.com/en-us/office/aa905496.aspx –

+0

Ken,이 링크를 가져 주셔서 감사합니다! 나는 그것이 어딘가에 있다는 것을 알았지 만 나의 삶을 위해 그것을 찾을 수 없었다. 이 질문에 대한 답을 찾을 수 있는지 알게 될 것입니다. – CSamp

답변

0

몇 주 동안의 연구 끝에 Word ActiveXObject의 일부인 SaveAs 함수를 사용하여 이미지를 추출하는 것이 가장 쉽다는 것을 발견했습니다. 파일을 HTML 문서로 저장하면 Word에서 이미지가 들어있는 폴더를 만듭니다.

거기에서 XMLHttp를 사용하여 브라우저에서 볼 수있는 새로운 IMG 태그를 만들 수 있습니다. 은 ActiveX Explorer가에서만 작동하므로 IE (9)를 사용하고 있습니다.

의이 SaveAs 부분으로 시작하자 :

// Define the path to the file 
var filepath = 'path/to/the/word/doc.docx' 
// Make a new ActiveXWord application 
var word = new ActiveXObject('Word.Application') 
// Open the document 
var doc = word.Documents.Open(filepath) 
// Save the DOCX as an HTML file (the 8 specifies you want to save it as an HTML document) 
doc.SaveAs(filepath + '.htm', 8) 

이제 우리는 그 (것)들에있는 이미지 파일과 같은 디렉토리에 폴더가 있어야합니다.

참고 : Word HTML에서 이미지는 <v:shape> 태그에 저장된 태그를 사용합니다. 예를 들면 :

<v:shape style="width: 241.5pt; height: 71.25pt;"> 
    <v:imagedata src="path/to/the/word/doc.docx_files/image001.png"> 
     ... 
    </v:imagedata> 
</v:shape> 

나는 말씀을 저장하는 외부 속성과 태그를 제거했습니다.

JavaScript를 사용하여 HTML에 액세스하려면 XMLHttpRequest 객체를 사용하십시오.

var xmlhttp = new XMLHttpRequest() 
var html_text = "" 

나는 워드 문서의 수백에 접근하고 있기 때문에, 나는 전화를 전송 전에 XMLHTTP의 onreadystatechange 콜백에게 을 정의하는 것이 가장 좋습니다 찾았습니다.

// Define the onreadystatechange callback function 
xmlhttp.onreadystatechange = function() { 
    // Check to make sure the response has fully loaded 
    if (xmlhttp.readyState==4 && xmlhttp.status==200) { 
     // Grab the response text 
     var html_text=xmlhttp.responseText 
     // Load the HTML into the innerHTML of a DIV to add the HTML to the DOM 
     document.getElementById('doc_html').innerHTML=html_text.replace("<html>", "").replace("</html>","") 
     // Define a new array of all HTML elements with the "v:imagedata" tag 
     var images =document.getElementById('doc_html').getElementsByTagName("v:imagedata") 
     // Loop through each image 
     for(j=0;j<images.length;j++) { 
      // Grab the source attribute to get the image name 
      var src = images[j].getAttribute('src') 
      // Check to make sure the image has a 'src' attribute 
      if(src!=undefined) { 
       ... 

나는 때문에 IE는 내가 의사 경로와 src.split('/')[1]를 사용하고 아래의 예 있도록 innerHTML을 doc_html DIV로로드 때 HTML 속성 것 탈출 방법의 올바른 src 속성을로드 많은 문제를 했어 이미지 이름을 잡기 위해 (이 방법은 1 개 이상의 슬래시가있는 경우 작동하지 않습니다!) : 우리는 부모의합니다 (v:shape 물체를 사용하여 HTML의 DIV에 새 img 태그를 추가 곳

다음
   ... 
       images[j].setAttribute('src', '/path/to/the/folder/containing/the/images/'+src.split('/')[1]) 
       ... 

입니다) 부모 (우연히 p 개체가 됨).

   ... 
       images[j].parentElement.parentElement.innerHTML+="<img src='"+images[j].getAttribute('src')+"' style='"+images[j].parentElement.getAttribute('style')+"'>" 

      } 
     }  
    } 
} 
// Read the HTML Document using XMLHttpRequest 
xmlhttp.open("POST", filepath + '.htm', false) 
xmlhttp.send() 

는 조금 다릅니다 만은, 위의 방법이 성공적으로 IMG 태그를 추가 할 수 있었다 : 우리는 이미지에서 src 속성과 v:shape 요소에서 style 정보를 잡는하여 innerHTML을에 새 img 태그를 추가 원래 문서에 있던 HTML로 이동합니다.