Quản trị website – Hướng dẫn nhúng PDF vào Web30s

  • Monday 23/05/2022

PDF là gì?

PDF (Portable Document Format) là định dạng tài liệu di động, tập tin văn bản khá phổ biến của hãng Adobe Systems. Cũng giống như định dạng Word, PDF hỗ trợ văn bản thô cùng với font chữ, hình ảnh, âm thanh và nhiều hiệu ứng khác. Một văn bản PDF sẽ được hiển thị giống nhau trên những môi trường làm việc khác nhau. Đây cũng chính là ưu điểm vượt trội mà PDF sở hữu khiến cho định dạng này trở nên phổ biến cho việc phát hành sách, báo hoặc tài liệu khác qua mạng Internet.

Tài liệu của một website là một trong những dữ liệu đặc biệt bậc nhất mà ở đó các dữ liệu này là của riêng mỗi website muốn cung cấp cho 1 người nhất định. Hay còn được hiểu là catalog, một ấn phẩm giới thiệu sản phẩm, dịch vụ của công ty đến khách hàng. Catalog thường dùng để quảng bá dịch vụ, sản phẩm là công việc quan trọng trong việc thúc đẩy doanh số, lợi nhuận của công ty và cũng là xây dựng thương hiệu phát triển bền vững và lâu dài cho, đặc biệt hướng đến các doanh nghiệp là chủ website, của nhà bán hàng. Web30s cũng xin phép được giới thiệu cách để đưa các tập tin này ra màn hình.

Tùy vào từng loại tập tin sẽ có nhưng phương thức phù hợp. Trong khuôn khổ của bài viết này, bài viết sẽ hướng dẫn Người quản lý website các thao tác liên quan đến tập tin PDF.

Vì sao dùng PDF? 

Có nhiều lý do để sử dụng tập tin PDF. Tuy nhiên, phổ biến nhất là nằm ở tính chống sao chép và tính tương thích với mọi thiết bị hay nói một cách dễ nhớ hơn PDF là tập tin dùng để xem không cho phép chỉnh sửa. Dù có gửi đi cho ai thì Người quản trị – là người tạo ra tập tin PDF, người nhận cũng chỉ xem được tập tin gốc nhưng không thể chỉnh sửa thông tin. Nếu có chỉnh sửa thì sẽ có những vị trí không thể thay đổi được (Hình ảnh, trình bày nội dung,…).

Với các trình soạn thảo thì định dạng PDF này đều hỗ trợ xuất tập tin. Giúp Người quản trị biến toàn bộ văn bản cần thiết sang tập tin dạng PDF chỉ trong vòng một vài giây. Rất lý tưởng cho phục vụ công việc bảo mật thông tin và hạn chế sao chép thông tin.

PDF dễ dàng tích hợp vào Website  

Có 2 cách để thực hiện cho phần này:

Cách 1: trực tiếp đưa file PDF vào một đường dẫn.

Cách 2: đưa PDF hoạt động dưới dạng mã nhúng. 

Dù là cách nào thì cũng sẽ có ưu điểm và nhược điểm, để đảm bảo theo nhu cầu thì bài viết này sẽ chỉ ra cụ thể để Người quản trị có thể lựa chọn phù hợp với nhu cầu.

Cách 1: Đưa vào 1 đường dẫn

Ưu điểm

  • Dễ thực hiện.
  • Cách thao tác đơn giản.
  • Dễ dàng chỉnh sửa.

Nhược điểm

  • Dễ dàng bị tải về.
  • Mở ra 1 thẻ mới làm giảm thẩm mỹ khi yêu cầu khách hàng mở nhiều phiên làm việc. 
  • Phải thực hiện thêm thao tác chỉnh sửa đường dẫn Widget.

Sau đây là cách thực hiện đưa một file PDF vào đường dẫn.

Bước 1: Đăng tải tập tin lên hệ thống quản trị bằng cách truy cập trang quản trị Web30 chọn Quản lý Website => Quản lý tập tin.

Bước 2: Người quản trị chọn thư mục Files, sau đó ấn nút Tải lên (Uploads). Người quản trị thực hiện chọn tập tin đang lưu trữ trên máy tính để đưa vào website.

Bước 3: Thực hiện sao chép lại tên bằng ấn chuột phải và chọn đổi tên. Tại đây chỉ yêu cầu Người quản trị sao chép lại thông tin tên tập tin (Sẽ được dùng ở bước 5 ). 

Bước 4: Thực hiện quay lại trang web của Người quản trị và chọn 1 hình ảnh có thể là sản phẩm, tin tức, logo, banner,… Người quản trị ấn chuột phải để có thể mở bảng tùy chọn, ta chọn mục Mở ảnh trong thẻ mới (Open image in new tab)

Bước 5: Thực hiện thay đổi đường dẫn từ đoạn Files. Để dễ hình dung thì đây là 1 đoạn đường dẫn mẫu: 

http://tên_miền_của_wesbite/datafiles/xxx/upload/images/banner2/ten_file.pdf

Người quản trị web đã có một tổ chức thư mục thì việc quản lý các tập tin dễ dàng hơn. Tuy nhiên, khi đó người sử dụng muốn truy đến một đối tượng (một tập tin hoặc thư mục) không chỉ đơn giản là đưa ra tên của nó (vì có thể có nhiều tập tin hay thư mục con trùng tên trên các thư mục khác nhau) mà phải xác định thật rõ ràng về vị trí của đối tượng cần truy nhập.

Đoạn bôi đỏ Người quản trị chú ý là nơi tập tin dữ liệu của website đang được truy cập. Khi Người quản trị bật chức năng quản lý tập tin sẽ nhìn thấy 2 thư mục là Files và images. nếu tập tin ở trong 1 thư mục khác thì nhà bán hàng tiếp tục bổ sung thêm theo cấu trúc /Tên thư mục . Khi đã đến thư mục thì quý khách thực hiện dán tên tập tin ở bước 3 vào đường dẫn.

Người quản trị nếu đảm bảo đúng thao tác bước trên sẽ cho ra kết quả là xem được tập tin vừa đăng tải ngay trên trình duyệt.

Bước 6: Thực hiện truy cập Quản lý giao diện => Thiết lập giao diện, Người quản trị chọn Widget, trang đơn muốn gắn đường dẫn.

Lúc này chỉ cần thực hiện sao chép bổ sung vào đường dẫn của Widget trong Trang đơn đang thao tác là đã có thể sử dụng thành công. Đối với Trang đơn thì có thể gắn trực tiếp vào đường dẫn. Đối với nút cố định trên trang thì Quý khách thực hiện chọn Widget và ấn vào nút Tác vụ khác của widget nút bấm, chọn Tác vụ khác >> Liên kết. Bảng liên kết dữ liệu ta chọn:

  • Liên kết: Liên kết dữ liệu
  • Dữ liệu kết nối: Đường dẫn tập tin
  • Đích đến: Cửa sổ mới

Cách 2: Đưa tập tin dưới dạng mã nhúng

Ưu điểm

  • Chống sao chép.
  • Hạn chế tải tập tin.
  • Đưa trực tiếp lên trang, tiện lợi trong việc xem trang.
  • Tùy biến theo nhu cầu.

Nhược điểm

  • Khó thực hiện hơn cách 1.
  • Đòi hỏi đường dẫn độ chính xác cao.

Khi đưa PDF dưới dạng mã nhúng thì Khách hàng có thể xem trực tiếp tại trang mà không cần di chuyển đến trang khác. Cách thực hiện lấy đường dẫn như Bước 1- 5 Cách 1, do đó sẽ chi hướng dẫn thực hiện dán vào website:

Bước 1: Người quản trị thực hiện truy cập vào vị trí muốn nhập, Thực hiện chọn chuyển đổi sang Mã HTML trên chức năng của Widget/ Nội dung.  

Bước 2: Thực hiện dán đoạn mã dưới đây.

<iframe frameborder=”0″” id=”myiframe” onload=”injectJS()” scrolling=”no” src=”http://tên_miền-website/datafiles/xxx/upload/files/Một_số_yêu_cầu_cần_hỗ_trợ_trên_Web30s_apinterior.pdf#toolbar=0” style=”height: 400px; width: 100% ;”></iframe></p>

Trong đó: 

  • Màu đỏ là đường dẫn tập tin cần hiển thị.
  • Màu xanh lá là Chiều dài hiển thị của mã nhúng. Khuyến nghị nên để 400px-500px để các thiết bị diện thoại dễ xem
  • Màu xanh dường là Độ rộng của mã nhúng. Khuyến nghị không nên thay đổi thông số để mà hình co gian đều hiển thị 100% chiều rộng của đoạn. 
  • Màu tím là phần tắt hiển thị của chức năng có thể thực hiện được trên file PD gồm Tải xuống, In tập tin,.. (Nếu cần Nhà bán hàng chỉ cần loại bỏ phần màu tím này)

Thực hiện dán thành công sẽ cho ra kết quả một đoạn Iframe như hình ảnh sau. Thực hiện Lưu Trang/ Lưu dữ liệu và sau đó thực hiện kiểm tra lại trang được thực hiện gắn nội dung, 

Kết quả sau khi thực hiện

Bước 3: Lúc này, Người quản trị thực hiện Lưu Trang/ Lưu dữ liệu và sau đó thực hiện kiểm tra lại trang được thực hiện gắn nội dung, 

Kết quả màn hình

Trong trường hợp đường dẫn bị lỗi thì Người quản trị vui lòng kiểm tra lại thông tin tập tin. Vì độ chính xác cao nên hay chắc chắn rằng đường dẫn tập tin muốn được thêm đã và đang hoạt động trước khi thực hiện dán vào Iframe.

Thông tin kiến thức cơ bản Web30s tại: https://kb.pavietnam.vn/category/web30s
Thông tin kiến thức cơ bản Hosting tại: https://kb.pavietnam.vn/category/hosting
Đăng ký dịch vụ do P.A Việt Nam cung cấp tại: https://www.pavietnam.vn/
Tham khảo thông tin & bảng giá dịch vụ Ads30s tại: https://ads30s.vn/
Tham khảo thông tin & bảng giá dịch vụ Web30s tại: https://web30s.vn/
Tham khảo thông tin & bảng giá dịch vụ Hosting tại: https://www.pavietnam.vn/vn/hosting.html
Tham khảo các Ưu đãi hiện có tại: https://www.pavietnam.vn/vn/tin-khuyen-mai/
Facebook: https://www.facebook.com/pavietnam.com.vn

Quý khách có thể tham khảo thêm nhiều chương trình khuyến mãi của P.A Việt Nam tại đây.

P.A Việt Nam – Web30s

Rate this post