मैं जावास्क्रिप्ट का उपयोग करके ब्राउज़र में वर्ड डॉक्यूमेंट (.doc, .docx) कैसे प्रस्तुत करूं?


146

मैंने "ओपन / सेव" संवाद के बजाय ब्राउज़र में एक पीडीएफ फाइल प्रदर्शित करने के लिए सफलतापूर्वक कोड किया है। अब, मैं ब्राउज़र में वर्ड डॉक्यूमेंट प्रदर्शित करने की कोशिश कर रहा हूँ। मैं फ़ायरफ़ॉक्स, IE7 +, क्रोम आदि में एक वर्ड दस्तावेज़ प्रदर्शित करना चाहता हूं।

क्या कोई मदद कर सकता है? मुझे ब्राउज़र में वर्ड डॉक प्रदर्शित करते समय हमेशा "ओपन / सेव" संवाद मिल रहा है। मैं जावास्क्रिप्ट का उपयोग करके इस कार्यक्षमता को लागू करना चाहता हूं।



आप डॉकएक्स फ़ाइलों को दिखाने और संपादित करने के लिए प्रतिक्रिया में सिंक्रनाइज़ेशन-डॉक्यूमेंट-एडिटर का उपयोग कर सकते हैं
यूसुफ मोहम्मद

जवाबों:


225

वर्तमान में किसी भी ब्राउज़र में वर्ड डॉक्यूमेंट्स को रेंडर करने के लिए कोड आवश्यक नहीं है, और जहाँ तक मुझे पता है, कोई क्लाइंट-साइड लाइब्रेरी नहीं है जो वर्तमान में उन्हें रेंडर करने के लिए मौजूद है।

हालाँकि, यदि आपको केवल वर्ड डॉक्यूमेंट प्रदर्शित करने की आवश्यकता है, लेकिन इसे संपादित करने की आवश्यकता नहीं है, तो आप <iframe>दूरस्थ रूप से होस्ट किए गए .doc/ प्रदर्शित करने के लिए Google डॉक्यूमेंट्स व्यूअर का उपयोग कर सकते हैं .docx

<iframe src="https://docs.google.com/gview?url=http://remote.url.tld/path/to/document.doc&embedded=true"></iframe>

समाधान " फैंसीबॉक्स का उपयोग करके एक शब्द दस्तावेज़ कैसे प्रदर्शित करें " से अनुकूलित किया गया ।

उदाहरण:

JSFiddle

हालाँकि, यदि आपके पास मूल समर्थन है, तो अधिकांश में, यदि सभी ब्राउज़र नहीं हैं, तो मैं एक पीडीएफ फाइल के रूप में .doc/ .docxको फिर से शुरू करने की सलाह दूंगा, जिन्हें मोज़िला द्वारा PDF.js का उपयोग करके स्वतंत्र रूप से प्रदान किया जा सकता है ।

संपादित करें:

टिप्पणी में Microsoft Office 365 दर्शक को पोस्ट करने के लिए fatbotdesigns के लिए बहुत धन्यवाद ।

<iframe src='https://view.officeapps.live.com/op/embed.aspx?src=http://remote.url.tld/path/to/document.doc' width='1366px' height='623px' frameborder='0'>This is an embedded <a target='_blank' href='http://office.com'>Microsoft Office</a> document, powered by <a target='_blank' href='http://office.com/webapps'>Office Online</a>.</iframe>

एक और महत्वपूर्ण चेतावनी को ध्यान में रखना है, जैसा कि बताया गया है Lightswitch05 है कि , यह है कि यह आपके दस्तावेज़ को किसी तृतीय-पक्ष सर्वर पर अपलोड करेगा। यदि यह अस्वीकार्य है, तो प्रदर्शन का यह तरीका कार्रवाई का उचित पाठ्यक्रम नहीं है।

लाइव उदाहरण:

Google डॉक्स दर्शक

माइक्रोसॉफ्ट ऑफिस व्यूअर


2
@ पंकज आपको इसे Google ड्राइव पर अपलोड करने की आवश्यकता नहीं है। आप बस urlअपने सर्वर पर होस्ट किए गए .doc फ़ाइल में या तो पैरामीटर को बदल सकते हैं , या फिर इसे सीधे कहीं भी लिंक किया जा सकता है। Google डॉक्स रूपांतरण को फ़ॉरमैट द्वारा हैंडल करता है जिसे फ़्लाई पर ब्राउज़र द्वारा नियंत्रित किया जा सकता है, और इसे फ़ाइल को हथियाने के लिए सर्वर-साइड अनुरोध करने के बजाय Google डॉक्स पर अपलोड या संग्रहीत करने की आवश्यकता नहीं है।
ब्रैंडन अंजल्दी

3
@ पंकज यहां तक ​​कि अगर आप एक स्थानीय सर्वर की मेजबानी कर रहे हैं, तो भी Google एक्सेस नहीं कर सकता है localhost। इसे सार्वजनिक रूप से सुलभ URL की आवश्यकता है। आप फ़िंच जैसी बुनियादी अग्रेषण सेवा का उपयोग कर सकते हैं ।
ब्रैंडन अंजल्दी

11
आप ऑफिस लाइव एप्स व्यूअर का भी उपयोग कर सकते हैं: //view.officeapps.live.com/op/embed.aspx?src=your_url_here इस यूआरएल को एक iframe में
डालें

1
@BonifacePereira यदि आप एक इंट्रानेट सेट कर रहे हैं, तो आपको शायद स्थानीय रूप से कुछ रूपांतरण करना होगा, क्योंकि GDocs और Live दोनों को दस्तावेज़ कहीं से लाना होगा। यदि आप सक्षम हैं, तो आप OpenOffice या कुछ और के साथ रूपांतरण के लिए एक सर्वर सेट करने में सक्षम हो सकते हैं: stackoverflow.com/questions/5538584/…
ब्रैंडन अंजलि

18
केवल यह बताना चाहते हैं कि ये दोनों विधियाँ निश्चित रूप से Google और Microsoft के सर्वर पर फाइलें अपलोड करती हैं। यदि आप संवेदनशील जानकारी के साथ काम कर रहे हैं जिसकी सीमित पहुंच होनी चाहिए- तो ऐसा न करें। ब्राउज़र में देखने के लिए फ़ाइल का एक पीडीएफ संस्करण उत्पन्न करने के लिए PDF.js के साथ वैकल्पिक समाधान का उपयोग करें और विभिन्न एक्सेल / डॉक्टर संस्करणों को डाउनलोड करने के लिए एक लिंक प्रदान करें।
lightswitch05

30

ब्रैंडन और फैटबॉट्सइग्निंस के उत्तर दोनों सही हैं, लेकिन Google डॉक्स पूर्वावलोकन लागू करने के बाद, हमने कई .docx फाइलें ढूंढीं जिन्हें Google द्वारा नियंत्रित नहीं किया जा सकता था। MS Office ऑनलाइन पूर्वावलोकन पर काम करता है और एक आकर्षण पसंद करता है।

मेरी सिफारिश Google के ऊपर MS Office पूर्वावलोकन URL का उपयोग करने की होगी।

https://view.officeapps.live.com/op/embed.aspx?src=http://remote.url.tld/path/to/document.doc' 

1
क्या इसका उपयोग करने के लिए कोई प्रतिबंध है? support.microsoft.com/en-us/help/2769380/…
विष्णु

एक काउंटर कथा प्रदान करने के लिए - हमने Google संस्करण को चुना क्योंकि Microsoft रेंडरर क्रोम और ff दोनों में लोड होने में बहुत अधिक समय लेता है
डेविड हॉलिडे

13

प्रतीत होता है कि कुछ js पुस्तकालयों को संभाल सकते हैं .docx (नहीं .doc) से html रूपांतरण क्लाइंट-साइड (कोई विशेष क्रम में नहीं):

नोट: यदि आप ग्राहक पक्ष पर एक doc / docx फ़ाइल को परिवर्तित करने का सबसे अच्छा तरीका ढूंढ रहे हैं, तो शायद इसका उत्तर यह नहीं है । यदि आपको वास्तव में यह करने की आवश्यकता है, तो इसे सर्वर-साइड करें, यानी हेडलैस मोड , अपाचे-पोई (जावा) , पांडोक या जो भी अन्य पुस्तकालय आपके लिए सबसे अच्छा काम करता है।


1
मैं ध्यान दूंगा कि मेरा पुस्तकालय पूरी तरह से अप्राप्त है। यह docx फ़ाइलों को ऐसी चीज़ में परिवर्तित करने में सक्षम था जिसे ब्राउज़र में प्रदान किया जा सकता है। मुझे नहीं पता कि क्या यह सच है।
आर्टबर्कर्ट

2

मुझे लगता है कि मेरे पास एक विचार है। यह मेरा नट भी कर रहा है और मुझे अभी भी क्रोम में प्रदर्शित करने में परेशानी हो रही है।

अपने HTML उपयोग में दस्तावेज़ (name.docx) को एकल फ़ाइल वेबपृष्ठ (name.mht) के रूप में सहेजें

<iframe src= "name.mht" width="100%" height="800"> </iframe>

जैसा कि आप फिट देखते हैं ऊंचाइयों और चौड़ाई को बदल दें।


6
@guidomocha केवल टिप्पणी न करें कि, तर्क दें कि यह एक बुरा दृष्टिकोण क्यों है।
जे लूव

2

ViewerJS ओड्ट , ओडप, ओड्स और भी पीडीएफ की तरह ओपनऑफिस प्रारूप को देखने / एम्बेड करने में सहायक है।

ओपनऑफ़िस / पीडीएफ दस्तावेज़ एम्बेड करने के लिए

<iframe src = "/ViewerJS/#../demo/ohm2013.odp" width='700' height='550' allowfullscreen webkitallowfullscreen></iframe>

/ViewerJS/ ViewerJS का मार्ग है

#../demo/ohm2013 आपकी फ़ाइल का पथ एम्बेड करना चाहता है


क्या मैं a3 s
विष्णु

नहीं, आप केवल स्थानीय लिंक प्रदान करें
नवीन

1
आपकी प्रतिक्रिया के लिए धन्यवाद
विष्णु

दुर्भाग्य से मेरे संदर्भ में Microsoft प्रारूप अधिक व्यापक हैं।
guettli

1

मूल दस्तावेज (जिसमें मेरी रुचि है) विशेष रूप से वर्ड दस्तावेजों (दोनों विरासत बाइनरी .doc और आधुनिक डॉक्स प्रारूपों) के लिए एक दर्शक (और संपादक) बनाता है। यह HTML में दोषपूर्ण रूपांतरण के बिना ऐसा करता है। यहां जानिए कैसे शुरू करें https://github.com/NativeDocuments/nd-WordFileEditor/blob/master/README.md


2
मूल्य निर्धारण पर इसकी कोई जानकारी नहीं है। क्या 'वर्ड फाइल एडिटर / व्यूअर' मुफ्त है?
फायरिंगब्लैंक्स

इसके व्यावसायिक सॉफ्टवेयर, लेकिन हमारे पास स्टार्टअप / छोटे व्यवसाय के लिए एक मुफ्त योजना है, और दूसरों के लिए, उपयोग सीमाओं के अधीन एक मुफ्त योजना है। हम जल्द ही विवरण प्रकाशित करेंगे।
जेसनपुलटैक्स

यह एकल पृष्ठ सर्वर पर जैसे a3 s पर चल सकता है?
ग्राहम चिउ

सर्वर-साइड हम इसे डॉकटर कंटेनर के रूप में पैकेज करते हैं जिसे आपको कहीं चलाने की आवश्यकता होगी (जैसे ईसीएस)। (सिद्धांत रूप में हम
लैंबडा में

3
@JasonPlutext यह दिलचस्प लग रहा है। लेकिन मैं कुंद हो जाएगा: मैं एक अच्छा पैकेज या सेवा के लिए एक छोटे से उचित शुल्क का भुगतान करने को तैयार हूँ - लेकिन "अपनी जानकारी सबमिट करें और हम तुम्हें पता है लागत क्या यह दूँगा" एक है नहीं GO
मनश्शेख्ज़-मूविंग 2 कोडिडैक्ट

0

यदि आप अपनी DOCX फ़ाइलों को पूर्व-संसाधित करना चाहते हैं, तो रनटाइम तक प्रतीक्षा करने के बजाय आप उन्हें एक फ़ाइल रूपांतरण एपीआई जैसे ज़मज़ार का उपयोग करके पहले HTML में परिवर्तित कर सकते हैं । आप प्रोग्राम को डॉक्स से एचएमटीएल में परिवर्तित करने के लिए एपीआई का उपयोग कर सकते हैं, आउटपुट को अपने सर्वर पर सहेज सकते हैं और फिर उस HTML को अपने अंतिम उपयोगकर्ताओं तक सेवा दे सकते हैं।

रूपांतरण बहुत आसान है:

curl https://api.zamzar.com/v1/jobs \
-u API_KEY: \
-X POST \
-F "source_file=@my.docx" \
-F "target_format=html5"

यह Google और Microsoft की सेवाओं पर किसी भी क्रमिक निर्भरता को हटा देगा (उदाहरण के लिए यदि वे नीचे थे, या आप उनके द्वारा सीमित थे)।

यह भी लाभ यह है कि आप का विस्तार कर सकता है अन्य फ़ाइल प्रकार यदि आप चाहते थे (PPTX, XLS, डॉक्टर आदि)

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.