Hướng dẫn preview doc file in html - xem trước tệp doc trong html

Giới thiệu

Xem trước tệp dường như là một điều phổ biến, vì vậy nhiều nhà phát triển có thể nghĩ rằng hỏi Google làm thế nào để xem trước tài liệu Word trong trình duyệt? Sẽ đủ để tìm một giải pháp hoàn hảo cho dự án của họ, bởi vì làm thế nào một điều phổ biến như xem trước tệp có thể rất khó để đạt được? seems to be a common thing, so many developers might think that asking Google How to preview Word document in browser? would be enough to find a perfect solution for their project, because how such a popular thing like file preview can be so hard to achieve?

Tìm kiếm nó trên Google rất có thể sẽ dẫn bạn sử dụng trình xem Google Docs hoặc tệp HTML nội tuyến, ví dụ. <iframe /> không có thông tin cụ thể về các vấn đề mà cả hai giải pháp này đều có.Google docs viewer or inline HTML file embedding eg. <iframe /> with no specific information about the problems that both of these solutions have.

Ý tôi là gì khi xem trước tệp? Tôi có nghĩa là xem một tệp trên một trang web, giống như trên máy tính để bàn, trong một ứng dụng chuyên dụng. Nếu bạn muốn xem trước tệp của mình, tất cả những gì bạn cần là hướng URL vào tệp, nhưng làm thế nào bạn có thể biết rằng bạn có URL trực tiếp? Đối với hầu hết các trường hợp, việc dán nó vào trình duyệt của bạn sẽ tự động buộc một quá trình tải xuống (trừ PDF, rất có thể họ sẽ mở trong cửa sổ trình duyệt của bạn). Hãy để xem làm thế nào điều này có thể được thực hiện.viewing a file on a website, the same way as on a desktop, within a dedicated app. If you want to preview your file, all you need is direct the URL to the file, but how can you know that you have a direct URL? For most cases, pasting it in your browser will automatically force a download process (except pdf’s, most likely they’ll open up in your browser window). Let’s see how this can be implemented.

Xem trước các tệp với HTML Inline nhúng

Người nhúng nội tuyến là: <iframe />, <embed /> và <object />, cách làm việc của họ khá giống nhau, họ đã có những khác biệt nhỏ không có ý nghĩa đối với chúng tôi tại thời điểm này.

Làm thế nào để sử dụng nó?

Thêm phần tử nhúng nội tuyến trên trang web của bạn và trong thuộc tính SRC, hãy chuyển nó một URL trực tiếp vào tệp của bạn.

<iframe src="\[www.url_to_file.pdf\]" />

Pros:

• Không có giới hạn kích thước tệp, ngay cả các tệp lớn như 300MB PDF sẽ hiển thị, tất nhiên, sẽ mất nhiều thời gian để tải nhưng vẫn còn.
• Nó hoạt động trên tất cả các trình duyệt máy tính để bàn phổ biến: Chrome, Firefox, Safari, Opera, Edge, IE8+
• Nó có một tính năng bản địa của trình duyệt, vì vậy, nó là giải pháp nhanh nhất từ ​​tất cả các phương pháp được đề cập trong bài viết này.

Cons:

• Chỉ hoạt động với các loại tệp PDF
• Nó không hoạt động trên các trình duyệt di động:
  • Trình duyệt Safari hiển thị thông báo về không hỗ trợ PDF nội tuyến và cho nút tải xuống browser shows a message about no inline pdf support and gives a download button
  • Chrome trên iOS đang hoạt động giống như trên, nhưng trên Android, nó cung cấp một tùy chọn để chọn bất kỳ ứng dụng đã cài đặt nào trên thiết bị để mở tệp đó on iOS is doing the same as above, but on Android, it gives an option to choose any installed app on the device to open that file
  • Mozilla hiển thị một tin nhắn thông báo cho người dùng rằng cần có plugin shows a message informing the user that a plugin is needed

Xem trước các tệp với người xem tài liệu trực tuyến

Trong phần này, tôi sẽ cung cấp một số thông tin về các bản xem trước tài liệu trực tuyến miễn phí, thật không may, chỉ có hai và không ai trong số chúng là hoàn hảo, nhưng chúng mở rộng đáng kể các khả năng. Vì vậy, ở đây chúng tôi có tiền tiết kiệm tiền của chúng tôi: Google Docs và ứng dụng web văn phòng.free online doc previews, unfortunately, there are only two and none of them is perfect, but they greatly expand the possibilities. So here we have our money savers: Google Docs and Office Web Apps.

Làm thế nào để sử dụng chúng?

Chỉ cần thêm thuộc tính SRC của bạn bằng một URL thích hợp vào trình xem tài liệu cụ thể, nó sẽ tải xuống tệp của bạn từ URL và sau đó tạo một trang HTML từ nó, sau đó bạn hướng iframe của mình đến nó và voila! Tất nhiên, có một số hạn chế cho điều này nhưng không tệ như bạn nghĩ.

Xem trước các tệp với Trình xem Google Docs

Đây không phải là một giải pháp chính thức, ý tôi là Google Nowhere cung cấp cho bạn tài liệu về cách sử dụng đúng cách này, nhưng các nhà phát triển bằng cách nào đó đã phát hiện ra nó, mặc dù người xem Google Docs không được hỗ trợ nữa, nó vẫn hoạt động!Google Docs Viewer isn’t supported anymore it still works!

Ưu điểm:

• Nhiều loại tệp được hỗ trợ, có thể bạn sẽ tìm thấy mọi loại tệp bạn muốn xem trước: hình ảnh, video, văn bản, mã, loại tệp Microsoft Office, PDFS, loại tệp Adobe, SVG, loại tệp phông chữ, loại tệp lưu trữ và hơn thế nữa.
• Giới hạn tệp 25MB,
• Hoạt động trên mọi trình duyệt máy tính để bàn và di động phổ biến, điều này rất quan trọng nếu bạn muốn xem trước trên thiết bị di động which is very important if you want to make a preview on mobile devices

Cons:

• Cùng với việc thiếu sự hỗ trợ từ Google, nó thích ném các lỗi ngẫu nhiên sẽ không dẫn đến bản xem trước nào, thì điều gì sẽ không có cách nào kiểm tra xem nó có thất bại hay không, trình nhúng nội tuyến của bạn sẽ không cung cấp cho bạn bất kỳ thông tin nào về nó ( Không có sự kiện trình duyệt hoặc bất cứ điều gì). Được rồi ... Tôi đã tìm thấy một cách để kiểm tra nó, tôi không tự hào lắm nhưng ít nhất nó hoạt động, tôi sẽ chia sẻ ý tưởng trong phần Tóm tắt.likes to throw random errors which will result in no preview at all, what’s more… there’s no way of checking if it failed or not, your inline embedder won’t give you any information about it (no browser event or anything). Okay... I found a way to check it, I’m not very proud of it but at least it works, I’ll share the idea in the Summary section.
• Như bạn có thể biết, các loại tệp Microsoft Microsoft như .ppt, .doc, .xls, v.v. Tất cả, ví dụ như trong các tệp của .doc, một số hình ảnh có thể nhảy vào dòng/trang tiếp theo thay vì hiển thị liên tiếp ... bạn biết ... chỉ là Microsoft Word Things.

Xem trước các tệp với các ứng dụng web Office

Microsoft cũng cung cấp giải pháp cho các tệp xem trước trên trang web của bạn, chắc chắn đó là lựa chọn tốt nhất cho các loại tệp Office vì nó tốt nhất trong việc phân tích chúng vào HTML.HTML.

Props:

• Tải nhanh hơn Google Docs,
• Luôn hiển thị thành công kết quả - không có lỗi ngẫu nhiên,
• Chính xác nhất .docs và .ppts phân tích cú pháp,

Cons:

• Chỉ hỗ trợ các loại tệp Microsoft Office: .ppt (x), .doc (x), xls (x),
• Giới hạn 10MB cho tài liệu/ppts, 5MB cho XLS,
• Hỗ trợ thấp (hoặc không có) cho điện thoại di động, ném lỗi, không hiển thị bất cứ điều gì và nó không đáp ứng dưới mức độ rộng ~ 700px,, throws errors, doesn't display anything and it's not responsive below ~700px width,

Bây giờ chúng tôi có tất cả các thông tin, bây giờ chúng tôi cần đưa ra quyết định cuối cùng, hãy để Lừa vào đó.

Cho máy tính để bàn:

• PDF - Sử dụng hỗ trợ trình duyệt mặc định, nó chắc chắn là lựa chọn tốt nhất ở đây, không nghi ngờ gì về nó.
• Các tệp khác ngoài PDF - Google Docs, điều xấu duy nhất là những lỗi ngẫu nhiên đó, nhưng tôi thực sự đã sử dụng nó, trên nhiều ứng dụng web xem trước về cơ bản thích thất bại. Kiểm tra cách tôi đã giải quyết vấn đề này.
• Tùy chọn nếu bạn muốn phân biệt các loại tệp, thậm chí nhiều hơn, bạn nên sử dụng các ứng dụng văn phòng cho các loại tệp văn phòng, nhưng theo tôi, Google Docs là đủ tốt.

Cho điện thoại di động:

• Đối với mọi loại tệp, tùy chọn duy nhất của chúng tôi là sử dụng Trình xem Google Docs, không có giải pháp nào khác hoạt động trên thiết bị di động, tôi đã không có gì để nói ở đây.

Trước tiên, hãy để đối phó với các lỗi ngẫu nhiên của Google Docs, tôi muốn nói rằng tôi biết nó không phải là một giải pháp rất thanh lịch nhưng tôi tin rằng đó là cách duy nhất để làm điều đó. Firstly, I wanted to say that I know it’s not a very elegant solution but I believe it’s the only way to do it.

Điều quan trọng ở đây là nội dung HTML nội dung nhúng, ví dụ. <iframe /> không cho phép bạn can thiệp vào nội dung của nó khi nó được tải hoàn toàn, vì vậy, trong JavaScript tạo một khoảng thời gian mà cứ sau vài giây sẽ cố gắng vào nội dung iframe của bạn, nếu nó đã đưa ra lỗi, điều đó có nghĩa là nội dung được tải đúng và Bạn có thể dừng khoảng thời gian, nếu không có lỗi nào được ném, bạn cần làm mới iframe của mình bằng cách đặt lại thuộc tính SRC sau đó lặp lại mọi thứ cho đến khi được tải đúng.

Các giải pháp khác để nhúng các tệp của bạn trên trang web của bạn nếu bạn muốn kiểm tra một số gói sẵn sàng sử dụng bằng cách nào đó liên quan đến việc nhúng tệp, đây là một số liên kết mà tôi tìm thấy: If you would like to check out some ready to use packages that somehow relate to file embedding, here are some links that I found:

• https://pdfobject.com/
• https://viewerjs.org/
• https://mozilla.github.io/pdf.js/
• https://filepreviews.io/

Hãy nhớ rằng, tôi đã sử dụng bất kỳ ai trong số họ, vì vậy tôi có thể đề xuất bất kỳ điều gì cụ thể.

Bản tóm tắt

Các công cụ để xem trước các tệp trong trình duyệt sẽ khác nhau tùy thuộc vào loại tệp và thiết bị mà bạn sử dụng. Mỗi người có những ưu và nhược điểm riêng, vì vậy, nó thường tùy thuộc vào sở thích cá nhân mà bạn chọn.

Và nếu bạn cần giúp đỡ với sự phát triển React.js của bạn, nhóm các nhà phát triển chuyên gia của chúng tôi sẽ sẵn lòng giúp đỡ!

Arkadiusz Machalica

Tôi là một nhà lãnh đạo công nghệ phản ứng với cách tiếp cận toàn diện để chế tạo mã. Nhờ vào nhiều năm kinh nghiệm, tôi xây dựng các giải pháp phần mềm sạch và có thể bảo trì cho khách hàng của chúng tôi. Tôi luôn sở hữu ứng dụng và nỗ lực thêm để cải thiện UX và các giả định đằng sau các tính năng tôi thực hiện.

Làm cách nào để xem tệp .doc trong HTML?

Làm cách nào để nhúng tệp Docx trong HTML?

Làm cách nào để xem PDF trong HTML?