Hy vọng tạo bản xem trước tệp đính kèm gmail như chức năng sử dụng angularjs

Question

Tôi có yêu cầu nơi tôi muốn hiển thị bản xem trước tệp cho người dùng.

Có nhiều loại tệp khác nhau được hỗ trợ như; .pdf, .xlsx, .doc, .rar, .jpeg, .png và nhiều hơn thế nữa.

Khi người dùng nhấp vào bản xem trước, nó sẽ mở tệp trong cửa sổ bật lên nơi xem trước tệp được hiển thị với anh ấy. Người dùng có thể Phóng to, Thu nhỏ, Tải xuống tệp. Cũng giống như bạn có thể thấy trong gmail để xem trước tệp đính kèm.

Xin vui lòng, bất kỳ ai cũng có thể hướng dẫn tôi đến bất kỳ thư viện hoặc tài nguyên hữu ích nào có liên quan cho cùng.

Cảm ơn trước

Answer 1

Có hai cách chính để bạn có thể thực hiện việc này.

1) Phía máy chủ: Hiển thị xem trước sau khi phía máy chủ (tải lên tệp) thành hình ảnh jpg/png và lưu trữ bản xem trước trên máy chủ. Đây là cách dễ nhất để thực hiện ở phía máy khách, nhưng yêu cầu thêm dung lượng lưu trữ trên máy chủ.

2) Phía máy khách: Hiển thị bản xem trước 'trực tiếp' bằng javascript trong trình duyệt, điều này làm giảm số lượng máy chủ phải làm/lưu trữ, nhưng yêu cầu khách hàng tải xuống đầy đủ tệp trong bộ nhớ trước khi nó có thể hiển thị bản xem trước, cho các tệp lớn có thể là một vấn đề. Ngoài ra, bạn sẽ cần thư viện javascript được bao gồm cho khả năng từng loại tệp riêng lẻ, vì hầu hết các thư viện sẽ nhắm mục tiêu một định dạng tệp cụ thể.

Phía máy chủ có lẽ là cách được khuyên dùng. Bạn đang sử dụng gì cho máy chủ web của mình?

Answer 2

Bạn đang xem tạo trình xem tài liệu.

Hãy tôn trọng công việc lớn của tôi khi trình duyệt không hiểu các định dạng này. Trình duyệt có thể hiển thị trực tiếp hình ảnh trên canvas nhưng không biết cách hiển thị các tệp khác. Vì vậy, bất kỳ tệp nào ngoài định dạng hình ảnh, bạn cần phải lưu chúng tạm thời trên máy chủ và sau đó phát trực tuyến trên trình duyệt và hiển thị chúng bằng cách sử dụng trình xem tệp tương ứng.

Bạn có thể chuyển đổi tệp doc và xlsx thành pdf và hiển thị các tệp này bằng trình xem pdf (http://ngmodules.org/modules/ng-pdfviewer). Có rất nhiều bộ chuyển đổi tài liệu có sẵn trên internet (tuy nhiên bạn sẽ cần phải kiểm tra các điều khoản cấp phép vì hầu hết chúng được cấp phép GPL, không được sử dụng trong các dự án thương mại).

Nếu bạn muốn lưu công việc này sau đó đi cho máy chủ của bên thứ ba những mất tất cả sơn để chuyển đổi tài liệu trong html5 như https://crocodoc.com/why-crocodoc/

Bạn cũng có thể thử sử dụng google doc xem google doc veiwer

Answer 3

Câu hỏi này là khá rộng lớn. Tôi sẽ không đi qua tất cả các bước về cách triển khai chỉ thị người xem tệp đính kèm, nhưng dưới đây là một số gợi ý mà bạn có thể thấy hữu ích.

Để cho phép người dùng tải xuống tệp, bạn chỉ cần đặt liên kết tải xuống ở đâu đó. Nếu bạn đang lưu trữ tệp đính kèm trên Amazon S3, Google Cloud Storage hoặc một số dịch vụ lưu trữ đám mây khác, hãy kiểm tra tài liệu của họ. Nếu bạn đang tải xuống các tệp từ máy chủ của riêng mình, hãy đảm bảo đặt tiêu đề phản hồi HTTP Content-Disposition HTTP thành attachment; filename="ORIGINAL_FILENAME", trong đó ORIGINAL_FILENAME là tên tệp bạn muốn người dùng thấy trong hộp thoại lưu xuất hiện khi họ nhấp vào liên kết tải xuống.

Hiện có trên người xem.

Đối với tệp PDF, tôi sẽ sử dụng pdfJS. Có một chỉ thị góc cho nó here. Bạn có thể xem một số thứ như CloudConvert cho các tệp khác, để chuyển đổi ehm thành PDF và sau đó hiển thị chúng trong pdfJS, nhưng sau đó bạn có thể muốn lưu trữ tệp PDF trên máy chủ của mình, ngoài các tệp gốc , cần thêm dung lượng lưu trữ. Bạn cũng có thể sử dụng trình xem Google Documents hoặc trình xem Office 365, như được mô tả trong this answer.