몇 주 동안의 연구 끝에 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로 이동합니다.
http://msdn.microsoft.com/en-us/office/aa905496.aspx –
Ken,이 링크를 가져 주셔서 감사합니다! 나는 그것이 어딘가에 있다는 것을 알았지 만 나의 삶을 위해 그것을 찾을 수 없었다. 이 질문에 대한 답을 찾을 수 있는지 알게 될 것입니다. – CSamp