Xem trước của tài liệu PDF, DOC, EXCEL trên web bằng url của tài liệu

Post on: 2018-11-08 23:20:59 | in: Laravel

Để xem trước của tài liệu word, pdf, excel trên web có một dịch vụ tuyệt vời mà Google Documents cung cấp được gọi là Google Docs.

Để xem trước của tài liệu word, pdf, excel trên web có một dịch vụ tuyệt vời mà Google Documents cung cấp được gọi là Google Docs. Nó siêu mạnh mẽ và siêu dễ sử dụng. Về cơ bản, đó là một dịch vụ cho phép bạn chuyển URL của tài liệu đến dịch vụ này và nó sẽ hiển thị bản xem trước của tài liệu có thể sử dụng được trong DOM. Điều này thật tuyệt vời khi cung cấp bản xem trước các tài liệu phổ biến như PDF, DOC và hơn thế nữa.

Ví dụ

Bạn có thể thêm iFrame đó vào HTML, bạn có bản xem trước của tài liệu PDF được nhúng trong trang web của mình.

Tuy nhiên, ứng dụng mà chúng tôi đang xây dựng đã sử dụng các tài liệu riêng tư, được bảo vệ được lưu trữ trên Amazon S3. Vì vậy, để chuyển URL tới Trình xem Google Docs, chúng tôi phải có URL được chỉ định. Vì vậy, nó sẽ giống như thế này

Ngay sau khi chúng tôi thực hiện việc này, chúng tôi đã nhận được lỗi "No Preview Available" từ Google Docs. Sau khi thử nhiều giải pháp, nó chỉ ra lỗi phải làm với thực tế là chúng tôi đã chuyển một URL với các tham số chuỗi truy vấn dưới dạng tham số chuỗi truy vấn đến một URL khác. Tức là, Amazon S3 Presigned URL chứa các tham số chuỗi truy vấn, vì vậy nó chứa một "?" và "&" gây nhầm lẫn URL bên ngoài.
Vì vậy, bạn phải Mã hóa các S3 Presigned URL trước khi chuyển nó vào Google Doc Viewer.
Nếu bạn đang sử dụng URL được chỉ định, tôi đoán là bạn đang thiết lập động URL. Chúng tôi làm điều đó với Javascript, vì vậy mã của chúng tôi trông giống như sau:

var encodedUrl = encodeURIComponent(amazon_presigned_url); var iFrameUrl = 'https://docs.google.com/viewer?url=' + encodedUrl + '&embedded=true';

Chúng tôi đã gặp phải vấn đề mà chúng tôi đã thử encodeURI thay vì encodeURIComponent, nhưng đó chỉ là sự hiểu lầm của chúng tôi về những phương pháp đó. Nếu bạn đang thực hiện mã hóa phía máy chủ, hãy đảm bảo rằng bạn đang xóa đúng "/", "?" Và "&".