Nhúng PDF vào HTML kích thước đầy đủ

Làm cách nào để bạn nhúng tài liệu PDF vào trang web của mình để xem nội tuyến?

Đâ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"
  scrolling="no"
  width="640"
  height="480"
  src="https://drive.google.com/file/d/<>/preview"
>
iframe>

Đây là phương pháp phổ biến nhất để nhúng các tệp PDF - nó đơ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 hấp dẫn và tùy chỉnh hơn cho các tệp PDF trong trang web của mình, hãy xem Adobe View SDK 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 làm cho giải pháp nhúng PDF này trở nên 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 kỳ ai cũng có thể chú thích tệp PDF được 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 có 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 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ị các trang PDF nội tuyến như hình ảnh và video

Trong Chế độ nội tuyến và đây là chế độ duy nhất của Adobe View SDK, tất cả các trang của tài liệu PDF 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 bằng 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 xem bản trình diễn trực tiếp này - tại đây, tài liệu PDF có 7 trang nhưng tất cả được hiển thị cùng một lúc giống như một trang web dài, do đó giúp điều hướng mượt mà

Cách nhúng tệp PDF bằng Adobe View SDK

Cần thêm một số bước để sử dụng View SDK. Đi đến adobe. io và tạo một bộ thông tin đăng nhập mới 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 miền, vì vậy nếu bạn có nhiều trang web, bạn sẽ cần một bộ thông tin đăng nhập khác cho chúng

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

<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: '<>',
      divId: 'adobe-dc-view',
    });
    adobeDCView.previewFile(
      {
        content: { location: { url: '<>' } },
        metaData: { fileName: '<>' },
      },
      {
        embedMode: 'IN_LINE',
        showDownloadPDF: false,
        showPrintPDF: false,
      }
    );
  });
script>

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

PDFNhúng

Chia sẻWhatsAppTwitterFacebook

Amit Agarwal

Chuyên gia phát triển của Google, Nhà vô địch Google Cloud

Amit Agarwal là Chuyên gia nhà phát triển của Google về Google Workspace và Google Apps Script. Ông có bằng kỹ sư về Khoa học Máy tính (I. I. T. ) và là blogger chuyên nghiệp đầu tiên ở Ấn Độ

Amit đã phát triển một số tiện ích bổ sung phổ biến của Google bao gồm Mail Merge cho Gmail và Document Studio. Đọc thêm về Lifehacker và YourStory

Làm cách nào để nhúng PDF vào HTML?

Tôi có thể hiển thị PDF trong HTML không?

Làm cách nào để tạo phản hồi PDF trong HTML?

Làm cách nào để hiển thị PDF trong HTML bằng Javascript?