Cách nhúng file PDF vào trang web của bạn

Làm thế nào để bạn nhúng một tài liệu PDF vào trang web của bạn để xem nội tuyến? Một tùy chọn phổ biến là bạn tải tệp PDF lên dịch vụ lưu trữ trực tuyến, giống như Google Drive hoặc Microsoft OneDrive, đặt tệp ở chế độ công khai và sau đó sao chép-dán mã IFRAME do các dịch vụ này cung cấp để nhanh chóng nhúng tài liệu vào bất kỳ trang web nào.

Đây là mã nhúng PDF mẫu cho Google Drive hoạt động trên tất cả các trình duyệt.

<iframe frameborder="0" height="480" scrolling="no" src="https://drive.google.com/file/d/<<FILE_ID>>/preview" width="640">
</iframe>

Đây là phương pháp phổ biến nhất để nhúng các tệp PDF - rất đơn giản, nó chỉ hoạt động nhưng nhược điểm là bạn không kiểm soát được cách trình bày các tệp PDF trong các trang web của mình.

Nếu bạn muốn cung cấp trải nghiệm đọc tùy chỉnh và nhập vai hơn cho các tệp PDF trong trang web của mình, hãy xem SDK Adobe View mới. Đây là một phần của nền tảng Adobe Document Cloud nhưng không tốn một xu.

Dưới đây là một số tính năng độc đáo giúp giải pháp nhúng PDF này nổi bật:
  • Bạn có thể thêm các công cụ chú thích bên trong trình xem PDF. Bất cứ ai cũng có thể chú thích tệp PDF nhúng và tải xuống tệp đã sửa đổi.
  • Nếu bạn đã nhúng một tài liệu dài với nhiều trang, người đọc có thể sử dụng chế độ xem hình thu nhỏ để nhanh chóng chuyển đến bất kỳ trang nào.
  • Trình xem PDF có thể được tùy chỉnh để ẩn các tùy chọn tải xuống và in các tệp PDF.
  • Có các phân tích tích hợp để bạn biết có bao nhiêu người đã xem tệp PDF của bạn và cách họ tương tác với tài liệu.
Và tính năng yêu thích của tôi về ViewSDK là chế độ nhúng nội tuyến. Hãy để tôi giải thích điều đó một cách chi tiết.

Hiển thị PDF Pages Inline như hình ảnh và video


Trong Inline Mode đây là duy nhất cho Adobe View SDK, tất cả các trang của tài liệu PDF được nhúng được hiển thị cùng một lúc để khách truy cập trang web của bạn không phải cuộn tài liệu khác với trang web mẹ. Các điều khiển PDF được ẩn khỏi người dùng và các trang PDF hòa trộn với hình ảnh và nội dung HTML khác trên trang web của bạn.

Để tìm hiểu thêm, hãy kiểm tra bản demo trực tiếp này - ở đây tài liệu PDF có 7 trang nhưng tất cả được hiển thị cùng một lúc như một trang web dài, do đó cung cấp điều hướng trơn tru.

Cách nhúng tệp PDF với SDK Adobe View


Phải mất thêm một vài bước để sử dụng View SDK. Tới adobe.io và tạo ra một bộ mới của thông tin cho trang web của bạn. Xin lưu ý rằng thông tin đăng nhập chỉ hợp lệ cho một tên miền vì vậy nếu bạn có nhiều trang web, bạn cần một bộ thông tin đăng nhập khác cho họ.

Tiếp theo, mở liên kết và tạo mã nhúng. Bạn cần thay thế clientIdbằng bộ thông tin đăng nhập của bạn. Mã url trong mẫu phải trỏ đến vị trí tệp PDF của bạn.

// Code example
div id="myid" class="myclass" hidden>

<div id="adobe-dc-view" style="width: 800px;"></div>
<script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>
<script type="text/javascript">
    document.addEventListener("adobe_dc_view_sdk.ready", function () {
        var adobeDCView = new AdobeDC.View({
            clientId: "<<your_client_id>>",
            divId: "adobe-dc-view"
        });
        adobeDCView.previewFile({
            content: { location: { url: "<<pdf location="">>" } },
            metaData: { fileName: "<<pdf file="" name="">>" }
        }, {
            embedMode: "IN_LINE",
            showDownloadPDF: false,
            showPrintPDF: false
        });
    });
</script>

Kiểm tra các tài liệu chính thứckho lưu trữ mã để biết thêm các mẫu.

Comments

ĐĂNG KÝ

About

Send