Tôi muốn trang có một tệp PDF được nhúng. WordPress có thể tự làm điều này và chèn nó bằng phần tử . Vấn đề là trang web là https, nhưng đường dẫn đến các tệp là http, điều này gây ra sự cố về nội dung hỗn hợp và pdf chỉ được hiển thị trong Firefox [có thể là một số tiện ích mở rộng tích hợp sẵn]
Tên miền được đặt thành Chuyển hướng sang HTTPS. Đã bật và xử lý nội dung hỗn hợp. Tuy nhiên, nó không hoạt động trong trường hợp này. Vì vậy, tôi đã cố gắng thêm nó bằng cách sử dụng một
Nó đã được hiển thị trong trình duyệt, nhưng nó gây ra các vấn đề khác
1. Trong mỗi trình duyệt, cửa sổ tích hợp với tệp PDF được hiển thị khác nhau – thanh công cụ khác nhau. Có phải nó hoàn toàn phụ thuộc vào trình duyệt và không thể ảnh hưởng đến nó?
2. Điều gì xác định chiều cao tối đa của cửa sổ. Mình để height là 100% thì nó chỉ hiện ra dạng "mì sợi nhỏ" và mình chưa tìm ra nguyên nhân là do yếu tố nào
3. Tại sao nó không xuất hiện trong trình duyệt Android [những trình duyệt hỗ trợ phần tử ] và chỉ có cửa sổ tải xuống tệp bật lên?
Hãy giúp tôi
Cảm ơn bạn
Trang tôi cần trợ giúp. [đăng nhập để thấy link]
Đang xem 2 trả lời - 1 đến 2 [trong tổng số 2]
George Appiah
[@gappiah]
Hiển thị PDF trong các trình duyệt được xử lý độc lập bởi mỗi trình duyệt, sử dụng mã của bên thứ ba hoặc của bên thứ ba, vì đây không phải là một phần của thông số HTML
Firefox sử dụng PDF. js và nếu tôi nhớ không lầm, Chrome [và có lẽ các trình duyệt dựa trên Chromium khác, nếu được hỗ trợ] sử dụng pdfium
Vì vậy, sự không nhất quán nằm ngoài dự kiến
Cách duy nhất để thực thi tính nhất quán kết xuất trong tất cả các trình duyệt là thực hiện phía máy chủ kết xuất, gói trình kết xuất JS PDF của riêng bạn hoặc sử dụng dịch vụ kết xuất của bên thứ 3
Đối với vấn đề ban đầu của bạn…
Vấn đề là trang web là https, nhưng đường dẫn đến các tệp là http, điều này gây ra sự cố về nội dung hỗn hợp và pdf chỉ được hiển thị trong Firefox [có thể là một số tiện ích mở rộng tích hợp sẵn]
Tên miền được đặt thành Chuyển hướng sang HTTPS. Đã bật và xử lý nội dung hỗn hợp. Tuy nhiên, nó không hoạt động trong trường hợp này
Nếu tôi hiểu bạn một cách chính xác,
— Miền lưu trữ tệp PDF hỗ trợ HTTPS
— Tuy nhiên, bằng cách nào đó, bạn đang cung cấp một liên kết HTTP tới tệp PDF cho WordPress
.
— Which, somehow, isn’t working for the PDF file, hence the mixed content issue.Điều tôi hoàn toàn không hiểu là tại sao ngay từ đầu, bạn không thể cung cấp cho WordPress liên kết HTTPS trực tiếp tới tệp PDF, điều này sẽ giải quyết vấn đề ban đầu của bạn?
Hay tôi đang hiểu nhầm vấn đề ban đầu của bạn?
Trình bắt đầu chủ đề michalrama
[@michalrama]
@gappiah
Tôi xin lỗi vì đã trả lời muộn. Tuy nhiên, nhờ điều này, tôi có thể nói rằng cảnh báo nội dung hỗn hợp không còn hiển thị nữa và tôi không biết tại sao và tôi không có thời gian để tìm hiểu
Trong bất kỳ trường hợp nào
1. Nếu nó hoàn toàn phụ thuộc vào trình duyệt, thì không có ích gì khi xử lý nó
2. Tôi đã giải quyết nó rồi. Trong đoạn chứa iframe [mã đang đề cập], tôi đặt lớp
pdf. Sau đó, tôi đã thêm mã JS.$[".pdf"].css["height", window.screen.availHeight / 2];3. PDF không hiển thị các trình duyệt hỗ trợ
, vì vậy vấn đề nằm ở chỗ khác. Nhưng tôi không biết ở đâu. Không biết, xin vui lòng?Việc nhúng tệp PDF vào trang web của bạn khá dễ dàng, nhưng điều này có thể cung cấp cho người dùng của bạn nhiều quyền truy cập hơn bạn muốn
Có thể bạn muốn hiển thị sách trên trang web của mình, nhưng bạn không muốn người dùng tải sách xuống vì nó sẽ làm giảm doanh thu quảng cáo của bạn. Có thể bạn muốn hiển thị tài liệu cho các thành viên trên trang web của mình, nhưng bạn không muốn họ chia sẻ tài liệu đó với những người không phải là thành viên
Bất kể lý do của bạn là gì, hướng dẫn này sẽ chỉ cho bạn cách ngăn tải xuống PDF trong ứng dụng React của bạn
Mọi cách người dùng có thể tải xuống tệp PDF
Trước khi giải quyết bất kỳ vấn đề nào, chúng ta cần xác định rõ hơn vấn đề đó là gì
Có ba cách chính để người dùng có thể tải xuống tệp PDF
- Nhấp vào nút tải xuống trên trình xem PDF của trình duyệt của bạn
- Nhấp chuột phải vào tệp PDF và chọn “Lưu dưới dạng. ”
- In trang web và chọn “Save as PDF. ”
Chúng tôi sẽ khám phá các giải pháp cho tất cả các phương pháp này
Hạn chế
Tôi muốn thẳng thắn với những hạn chế của hướng dẫn này. Vì thông tin trên trang web của bạn nằm trên web công khai nên sẽ luôn có một số cách để người dùng có thể truy xuất hoặc tạo lại tệp PDF thông qua dữ liệu trên trang web của bạn. Hướng dẫn này chỉ đơn giản là ngăn “người dùng bình thường” tải xuống tệp PDF của bạn — không phải “người dùng chuyên gia” hoặc nhà phát triển. Hướng dẫn này cũng không ngăn ảnh chụp màn hình vì điều đó nằm dưới sự kiểm soát của HĐH và không thể bị ảnh hưởng bởi mã đang chạy trong trình duyệt
Bây giờ chúng ta đã hiểu rõ về các kỹ thuật, hãy bắt đầu
Xóa nút tải xuống
Cách đơn giản nhất để nhúng tệp PDF vào trang web là sử dụng thẻ
Tuy nhiên, điều này sử dụng trình xem PDF tích hợp của trình duyệt, thường cung cấp cho người dùng tùy chọn tải xuống
Chúng tôi có thể giải quyết vấn đề này bằng cách thêm
#toolbar=0vào nội dung của PDFĐiều này loại bỏ toàn bộ thanh công cụ và do đó, nút tải xuống
Điều này cũng hoạt động theo cách tương tự nếu bạn chọn nhúng tệp PDF bằng một
iframeKhi sử dụng các thành phần web
hoặc, người dùng vẫn có thể nhấp chuột phải vào tài liệu và chọn “Save As”Điều này thật đáng tiếc vì đó vẫn là một cách rất dễ dàng để người dùng tải xuống bản PDF
Ngăn chặn nhấp chuột phải
Nếu bạn đã từng sử dụng trình xử lý sự kiện
2, việc ngăn nhấp chuột phải sẽ khiến bạn cảm thấy như ở nhà. Thay vào đó, chúng tôi chỉ sử dụng trình xử lý sự kiện3Theo mặc định, nhấp chuột phải vào một phần tử sẽ hiển thị menu ngữ cảnh, cung cấp cho người dùng một số tùy chọn
Bạn có thể ngăn menu ngữ cảnh hiển thị bằng cách ngăn trình xử lý sự kiện mặc định cho sự kiện nhấp chuột phải
Điều này ngăn menu ngữ cảnh xuất hiện. Tôi đang bỏ qua ảnh chụp màn hình vì không có gì để hiển thị. Khi bạn nhấp chuột phải, không có gì xuất hiện
Vấn đề duy nhất là có một số thành phần web không hỗ trợ
3. Đáng buồn thay, điều này bao gồmvà. Để nhắc lại, bạn không thể ngăn việc nhấp chuột phải vàohoặchiển thị PDF, vì vậy chúng tôi cần tìm một tùy chọn khácGiới thiệu phản ứng-pdf
Tại thời điểm này, chúng tôi không còn có thể sử dụng
hoặcvì chúng không cung cấp tính linh hoạt để tắt nhấp chuột phải. Thay vào đó, chúng tôi sẽ sử dụng một mô-đun npm có tên là Reac-pdfMô-đun này là một trình bao bọc xung quanh pdf. js, một dự án nguồn mở được phát triển bởi Mozilla hiển thị các tệp PDF trong HTML. Xét về các thành phần web cơ sở, react-pdf hiển thị tệp PDF trong thẻ
#toolbar=04, có hỗ trợ cho trình xử lý sự kiện3Để cài đặt mô-đun này, hãy chạy
#toolbar=06. Nếu bạn sử dụng npm, hãy chạy#toolbar=07Đây là một ví dụ đơn giản về cách hoạt động của react-pdf
Thao tác này hiển thị rõ ràng tệp PDF trên trang mà không cần trình xem PDF mặc định của trình duyệt. Do đó, trải nghiệm xem nhất quán hơn trên các trình duyệt và không bao gồm thanh công cụ
Ở chế độ nền, Reac-pdf đang chuyển đổi tệp PDF của bạn thành hình ảnh, sau đó hiển thị hình ảnh đó trên trang web. Mặc định trình duyệt vẫn cho tùy chọn lưu ảnh này
Vì điều này hiển thị một thành phần web
#toolbar=04, nên việc ngăn menu ngữ cảnh xuất hiện là điều đơn giản. Chúng tôi chỉ có thể áp dụng trình xử lý sự kiện3Khá đẹp, phải không?
Ngăn In và “Lưu dưới dạng PDF”
Ngay bây giờ, người dùng vẫn khá dễ dàng lưu một bản sao của PDF bằng cách lưu trang web dưới dạng PDF. Điều này được thực hiện bằng cách in trang web hiện tại và chọn đích in “Lưu dưới dạng PDF”
Để ngăn chặn điều này, chúng ta có thể sử dụng truy vấn phương tiện CSS. Truy vấn phương tiện cho phép bạn xác định kiểu dáng nhất định tùy thuộc vào loại phương tiện, chẳng hạn như
iframe0,iframe1 hoặc [đối với mục đích của chúng tôi]iframe2. Đảm bảo thêmiframe3 vào thành phần của bạn và nhập tệp CSS của bạnTôi đã tạo một tệp CSS có tên là
iframe4 và thêm truy vấn phương tiệnBây giờ nếu bạn cố gắng in trang, PDF không xuất hiện
Tuyệt quá. Giờ đây, chúng tôi đã khiến người dùng thực sự khó tải xuống các tệp PDF mà bạn hiển thị trên trang web của mình
Trình xem PDF mạnh mẽ hơn
Cho đến nay, mã của chúng tôi khá đơn giản và đủ để giúp bạn bắt đầu thêm tính năng này vào trang web của mình. Tuy nhiên, để càng kỹ lưỡng càng tốt, tôi muốn bao gồm một ví dụ đầy đủ về trình xem PDF, vì vậy đây là
Mã cho dự án ví dụ này có sẵn trên GitHub. Liên kết này cũng bao gồm các hướng dẫn về cách thiết lập và làm cho nó hoạt động trên máy của bạn
Phần kết luận
Tôi hy vọng hướng dẫn này hữu ích và bạn đã học được điều gì đó trên đường đi. Nếu bạn có bất kỳ câu hỏi nào, đừng ngần ngại hỏi. Tôi thích giúp đỡ các nhà phát triển đồng nghiệp của mình và sẽ cập nhật bài viết với bất kỳ thông tin hữu ích nào. Nếu bạn thích đọc và muốn có những mẩu nội dung nhỏ, có thể tiêu thụ được, bạn nên theo dõi Twitter của tôi
Làm cách nào để hiển thị PDF trong iframe?
Nhấp chuột phải vào liên kết trong thuộc tính href và nhấp vào Sao chép địa chỉ liên kết. Tạo khối nội dung Văn bản mới. Nhấp vào biểu tượng Nhúng phương tiện và nhúng mã HTML vào iframe trỏ đến URL PDF mà bạn đã lưu ý ở bước 3. Nhấp vào dấu kiểm để xem PDF được hiển thị trong khung nội tuyến mới được tạoLàm cách nào để hiển thị tệp PDF trong iframe trong PHP?
Hiển thị PDF với iframe .nhập testPdf từ '. /Bài kiểm tra. pdf';function App[] { return []; }.Làm cách nào để nhúng PDF vào HTML?
Sử dụng thẻ iframe là cách thứ hai để nhúng tệp pdf vào trang web HTML. Trong quá trình phát triển web, các nhà phát triển web sử dụng thẻ iframe để nhúng các tệp ở nhiều định dạng khác nhau và thậm chí các trang web khác trong một trang web. Do khả năng tương thích rộng rãi, thẻ iframe được sử dụng rộng rãi để nhúng pdf.