Vấn đề Fancybox PDF trong Firefox

Question

Tôi đã thiết lập Fancybox để khi người dùng nhấp vào liên kết pdf, nó sẽ hiển thị pdf trong cửa sổ bật lên, tuy nhiên trong Firefox nó sẽ hỏi bạn có muốn lưu hay mở tệp và tôi không Tôi muốn điều này. Làm thế nào tôi có thể buộc các pdf được hiển thị trong popupbox fancybox? Nó hoạt động trong Safari.

<a class="pdf" href="http://www.test.co.u.uk/test.pdf">test.pdf</a> 

$(".pdf").fancybox({ 
    'width' : '700', 
    'height' : '700', 
    'autoScale' : true, 
    'transitionIn' : 'none', 
    'transitionOut' : 'none', 
    'type' : 'iframe' 
}); 

Answer 1

Cá nhân, tôi sẽ chỉ sử dụng Google Docs để hiển thị PDF trong khung nội tuyến. Nó tự động thay đổi kích thước tệp PDF để phù hợp với thứ nguyên iframe. Dưới đây là định dạng để sử dụng:

<iframe src="http://docs.google.com/gview?url=http://samplepdf.com/sample.pdf&embedded=true" style="width:100%; height:100%;" frameborder="0"></iframe> 

Bạn không cần flash hoặc bất kỳ plugin nào khác.

Answer 2

Tôi sẽ chuyển đổi tệp PDF thành HTML hoặc cố chuyển PDF thành hình ảnh.

Tôi gặp sự cố này nhưng tôi không thể thay đổi cài đặt máy chủ của mình để hiển thị tệp PDF thay vì nhắc họ tải xuống.

Ngoài ra còn có các biến thể giữa các trình duyệt theo cách họ đọc tệp PDF.

Answer 3

Trừ khi người dùng có trình cắm đã hoàn thành cài đặt PDF, PDF sẽ không hiển thị nội tuyến trong Firefox. Nó không phải là một định dạng mà Firefox hỗ trợ tại thời điểm này.

Answer 4

Rất có thể, bạn không có plugin pdf được cài đặt trong Firefox hoặc plugin vừa bị lỗi.

Trong Firefox, hãy truy cập Tools ->Add-ons ->Plugins và tìm plugin Adobe Acrobat PDF trong danh sách. Nếu không có ở đó, check this để tìm hiểu cách cài đặt (hoặc cài đặt lại).

Ngoài ra, có một cách tốt hơn để mở file PDF với Fancybox khác hơn iframe, vì vậy cho html này:

<a class="pdf" href="http://www.test.co.u.uk/test.pdf">test.pdf</a> 

bạn có thể sử dụng kịch bản này:

$(document).ready(function() { 
$(".pdf").click(function() { 
    $.fancybox({ 
    'width': '70%', // or whatever 
    'height': '90%', 
    'autoDimensions': false, 
    'content': '<embed src="'+this.href+'#nameddest=self&page=1&view=FitH,0&zoom=80,0,0" type="application/pdf" height="99%" width="100%" />', 
    'onClosed': function() { 
    $("#fancybox-inner").empty(); 
    } 
    }); 
    return false; 
}); // pdf 
}); // ready 

tôi đề nghị phương pháp này cho Fancybox v1.3.x kể từ May 2010

Xin lưu ý rằng tôi đặt chiều cao = "99%". Nếu bạn sử dụng HTML5 DCTYPE, nó sẽ tránh một thanh cuộn dọc kép. Điều này là do HTML5 khởi tạo lề.

CẬP NHẬT. BTW, các giá trị số nguyên đi mà không qoutes nên

'width' : '700', 
'height' : '700', 

nên

'width' : 700, 
'height' : 700, 

Nó sẽ giúp bạn tiết kiệm một số đau đầu, chủ yếu là với IE