2015-12-09 13 views
6

Tôi đang sử dụng nútj với mô-đun ảo để tạo pdf từ html.PhantomJS: CSS bên ngoài bị bỏ qua trong pdf được hiển thị

Trước tiên, tôi đọc mẫu html và điền dữ liệu đó vào dữ liệu và hiển thị dưới dạng pdf. Tôi muốn bootstrap css được sử dụng để tạo kiểu cho trang, tuy nhiên kiểu dáng được inored trong file pdf.

đây là mã của tôi javascript:

var phantom = require('phantom'); 

var htmlTemplate; 

fs = require('fs') 
fs.readFile('template.html', 'utf8', function (err,data) { 

    var htmlTemplate = populateTemplate(data, body) 

    phantom.create(function(ph){ 
     ph.createPage(function(page) { 

      page.set("paperSize", { 
      format: "A4", 
      orientation: 'portrait', 
      margin: '1cm' 
      }); 

      page.setContent(htmlTemplate, "", function(){ 
       page.render("../userdata/test.pdf", function(){ 
       console.log("page rendered"); 
       ph.exit(); 
       }); 
      }); 

     }) 
    }); 

}); 

và template html (simplyfied) trông như thế này:

<!DOCTYPE html> 
<html> 
    <head> 
     <link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.5/paper/bootstrap.min.css", rel="stylesheet"> 
     <meta charset="utf-8"> 
    </head> 
    <body> 

     <div class="container"> 
      <h1>Title</h1> 
      <%NAME%> 
     </div> 
    </body> 
</html> 

Tất cả các đánh dấu được render trang, nhưng không có phong cách. Thậm chí nếu tôi sử dụng tập tin css địa phương hoặc bao gồm các phong cách trong <style> yếu tố vào đầu, kết quả đều giống nhau

Trả lời

8

Nếu một số phong cách Bootstrap đang được áp dụng, nhưng không phải người khác, bạn có thể giả định rằng đó là một cuộc xung đột với Bootstrap CSS thư viện và in ấn. Các lớp nhất định, đặc biệt là các lớp lưới như col-md- không phải lúc nào cũng đúng tỷ lệ hoặc hiển thị trên trang được in. Nếu bạn gặp sự cố khi tải bố cục lưới chính xác để in, bạn có thể thử sửa các lớp này. Ví dụ:

  • Thay thế mỗi col-md-6 để col-xs-6.

Thanks to user Sonam for pointing this out.

tôi cũng khuyên bạn nên dùng một cái nhìn vào phần còn lại của chủ đề này về cách create printable Twitter Bootstrap page.

Tuy nhiên, nếu KHÔNG có kiểu khởi động đang được áp dụng, nguồn của sự cố có thể ở đâu đó giữa tải nội dung của trang và chuyển đổi trang đó thành tài liệu .pdf. Theo kinh nghiệm của tôi, nó luôn luôn là một chút khó khăn để gỡ lỗi các thư viện rendering PDF, vì thật khó để nhìn thấy nơi mà dòng chảy quá trình của bạn là đi sai. Có một vài điều bạn có thể thử:

Bạn có thể gọi .render() trước khi trang tải các tài nguyên bên ngoài (còn gọi là bootstrap). Hãy xem câu hỏi tương tự này về cách hiển thị tệp PDF trong Phantom. Giải pháp có thể là thêm thời gian chờ/trì hoãn để đảm bảo CSS bên ngoài của trang đã được tải.

tôi nên thêm - có một vài lý do khác là có thể gây ra các Phantom.js render trang để không tải trong nguồn lực bên ngoài. Đảm bảo bạn đã thiết lập đúng Phantom.js, đặc biệt là khóa localToRemoteUrlAccessEnabled. Xem dưới đây StackOverflow câu hỏi để tham khảo:

+0

cảm ơn, vấn đề này có vẻ là bootstrap css. Một số kiểu được in, nhưng một số kiểu được bỏ qua. – Zbynek

+0

Bạn có thể nói những lớp và kiểu nào từ Bootstrap đang được áp dụng không? Điều đó sẽ cho tôi biết thêm một chút về cách khắc phục vấn đề. Tôi biết Bootstrap không phải lúc nào cũng được biết đến là bản in thân thiện.Đây là một chủ đề liên quan về in từ bootstrap: http://stackoverflow.com/questions/12302819/how-to-create-a-printable-twitter-bootstrap-page –

+2

hệ thống lưới không được áp dụng - 'hàng 'và' col-xx-y' – Zbynek

Các vấn đề liên quan