Heim >Web-Frontend >js-Tutorial >Wie kann ich Word-Dokumente mithilfe von JavaScript in einem Webbrowser anzeigen?

Wie kann ich Word-Dokumente mithilfe von JavaScript in einem Webbrowser anzeigen?

Linda HamiltonOriginal: 2024-12-02 06:51:10554Durchsuche

How Can I Display Word Documents in a Web Browser Using JavaScript?

Word-Dokumente im Browser mit JavaScript anzeigen

Word-Dokumente (.doc, .docx) direkt im Browser anzuzeigen ist eine häufige Herausforderung , da derzeit kein Browser native unterstützt Rendering.

Lösung

Leider sind keine JavaScript-Bibliotheken verfügbar, die Word-Dokumente direkt rendern können. Wenn Ihre Anforderung jedoch nur darin besteht, das Dokument ohne Bearbeitung anzuzeigen, können Sie die folgenden Ansätze wählen:

Google Documents Viewer:

Sie können einen Google Document Viewer einbetten unter Verwendung eines um ein Remote-Word-Dokument anzuzeigen. Die URL sollte den Parameter „embedded=true“ enthalten.</p> <p><strong>Microsoft Office 365 Viewer:</strong></p> <p>Microsoft bietet einen Viewer an, der mithilfe eines <iframe> eingebettet werden kann. Beachten Sie, dass diese Methode Ihr Dokument auf einen Server eines Drittanbieters hochlädt.</p> <p><strong>Als PDF erneut speichern:</strong></p> <p>Für native Unterstützung in den meisten Browsern können Sie das Word-Dokument erneut speichern als eine PDF-Datei. PDF.js von Mozilla kann zum Rendern von PDFs verwendet werden.</p> <p><strong>Zusätzliche Überlegungen:</strong></p> <ul> <li>Wenn Sie sich für die Einbettung des Microsoft Office 365-Viewers entscheiden, beachten Sie dies Es lädt Ihr Dokument auf einen Server eines Drittanbieters hoch.</li> <li>Sowohl Google Docs Viewer als auch Microsoft Office Viewer erfordern eine Internetverbindung um zu funktionieren.</li> </ul> <p><strong>Live-Beispiele:</strong></p> <ul> <li>[Google Docs Viewer](https://jsfiddle.net/d06y47ke/)</li> <li>[Microsoft Office Viewer](https://view.officeapps.live.com/op/embed.aspx?src=http://remote.url.tld/path/to/document.doc)</li> </ul><p>Das obige ist der detaillierte Inhalt vonWie kann ich Word-Dokumente mithilfe von JavaScript in einem Webbrowser anzeigen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!</p></div><div class="nphpQianMsg"><a href="javascript:void(0);">JavaScript</a> <a href="javascript:void(0);">if</a> <a href="javascript:void(0);">for</a> <a href="javascript:void(0);">include</a> <a href="javascript:void(0);">require</a> <a href="javascript:void(0);">using</a> <a href="javascript:void(0);">JS</a> <a href="javascript:void(0);">function</a> <a href="javascript:void(0);">this</a> <a href="javascript:void(0);">display</a> <a href="javascript:void(0);">http</a> <a href="javascript:void(0);">https</a> <a href="javascript:void(0);">microsoft</a> <a href="javascript:void(0);">word</a> <a href="javascript:void(0);">iframe</a><div class="clear"></div></div><div class="nphpQianSheng"><span>Stellungnahme：</span><div>Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn</div></div></div><div class="nphpSytBox"><span>Vorheriger Artikel：<a class="dBlack" title="Welche JavaScript-Klassendefinitionsmethode sollten Sie wählen?" href="https://m.php.cn/de/faq/1796704037.html">Welche JavaScript-Klassendefinitionsmethode sollten Sie wählen?</a></span><span>Nächster Artikel：<a class="dBlack" title="Welche JavaScript-Klassendefinitionsmethode sollten Sie wählen?" href="https://m.php.cn/de/faq/1796704046.html">Welche JavaScript-Klassendefinitionsmethode sollten Sie wählen?</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>In Verbindung stehende Artikel</h2><em><a href="https://m.php.cn/de/article.html" class="bBlack"><i>Mehr sehen</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/de/faq/1609.html" title="Eine eingehende Analyse der Bootstrap-Listengruppenkomponente" class="aBlack">Eine eingehende Analyse der Bootstrap-Listengruppenkomponente</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/1640.html" title="Detaillierte Erläuterung des JavaScript-Funktions-Curryings" class="aBlack">Detaillierte Erläuterung des JavaScript-Funktions-Curryings</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/1949.html" title="Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)" class="aBlack">Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/2248.html" title="Angularjs integriert WeChat UI (weui)" class="aBlack">Angularjs integriert WeChat UI (weui)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/2351.html" title="Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse" class="aBlack">Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！</p></div><div class="footermid"><a href="https://m.php.cn/de/about/us.html">Über uns</a><a href="https://m.php.cn/de/about/disclaimer.html">Haftungsausschluss</a><a href="https://m.php.cn/de/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body><script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="https://tongji.php.cn/"; _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', '9']); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); </script></html>