2013-12-08 7 views
31

मैं जेएसपीडीएफ का उपयोग करने के लिए नया हूं लेकिन मेरे जीवन के लिए मुझे इस बात पर लागू करने के लिए कोई सीएसएस नहीं मिल सकता है! मैंने इनलाइन, आंतरिक, और बाहरी सभी को कोई फायदा नहीं हुआ है! मैंने एक और एसओ पोस्ट में पढ़ा है कि चूंकि यह तकनीकी रूप से एक फाइल में सामान प्रिंट कर रहा है, इसलिए मुझे प्रिंट स्टाइल शीट चाहिए, और यह भी काम नहीं करता है। जे एस:जेएसपीडीएफ को काम करने के लिए कोई स्टाइल नहीं मिल सकता

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script type="text/javascript" src="jspdf.js"></script> 
<script type="text/javascript" src="./libs/FileSaver.js/FileSaver.js"></script> 
<script type="text/javascript" src="./libs/Blob.js/BlobBuilder.js"></script> 
<script type="text/javascript" src="jspdf.plugin.standard_fonts_metrics.js"></script> 
<script type="text/javascript" src="jspdf.plugin.split_text_to_size.js"></script>    
<script type="text/javascript" src="jspdf.plugin.from_html.js"></script> 
<script> 
    $(document).ready(function(){ 
     $('#dl').click(function(){ 
     var specialElementHandlers = { 
      '#editor': function(element, renderer){ 
       return true; 
      } 
     }; 
     var doc = new jsPDF('landscape'); 
     doc.fromHTML($('body').get(0), 15, 15, {'width': 170, 'elementHandlers': specialElementHandlers}); 
     doc.output('save'); 
     }); 
    }); 
</script> 

HTML:

<body> 
    <div id="dl">Download Maybe?</div> 
    <div id="testcase"> 
     <h1> 
      We support special element handlers. Register them with jQuery-style 
     </h1> 
    </div> 
</body> 

और अंत में स्टाइलशीट कि बाहरी है

मैं एक बहुत ही बुनियादी पेज कि मैं सिर्फ के साथ काम करने के लिए किसी भी सीएसएस पाने के लिए कोशिश कर रहा हूँ है :

h1{ 
    color: red; 
} 
div{ 
    color: red; 
} 

मुझे यकीन है कि सभी सही तरीके से शामिल हो रहे हैं, और एन ओ त्रुटियां, पहले से ही उन सभी की जांच की गई है। क्या सीएसएस को काम करने के लिए मुझे कुछ अतिरिक्त फ़ंक्शन की आवश्यकता है? मुजे जानने दो कृपया! आपका बहुत बहुत धन्यवाद! आपके पास जो भी अन्य सुझाव हो सकते हैं, उनकी भी सराहना की जाती है!

संपादित करें:

<html> 
    <head> 
     <link rel="stylesheet" href="print.css" type="text/css" media="print"/> 
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
     <script type="text/javascript" src="jspdf.js"></script> 
     <script type="text/javascript" src="./libs/FileSaver.js/FileSaver.js"></script> 
     <script type="text/javascript" src="./libs/Blob.js/BlobBuilder.js"></script> 
     <script type="text/javascript" src="jspdf.plugin.standard_fonts_metrics.js"></script> 
     <script type="text/javascript" src="jspdf.plugin.split_text_to_size.js"></script>    
     <script type="text/javascript" src="jspdf.plugin.from_html.js"></script> 
     <script> 
      $(document).ready(function(){ 
       $('#dl').click(function(){ 
       var specialElementHandlers = { 
        '#editor': function(element, renderer){ 
         return true; 
        } 
       }; 
       var doc = new jsPDF('landscape'); 
       doc.fromHTML($('body').get(0), 15, 15, {'width': 170, 'elementHandlers': specialElementHandlers}); 
       doc.output('save'); 
       }); 
      }); 
     </script> 
    </head> 
    <body> 
     <div id="dl">Download Maybe?</div> 
     <div id="testcase"> 
      <h1> 
       We support special element handlers. Register them with jQuery-style 
      </h1> 
     </div> 
    </body> 
</html> 
+0

क्या आपको अपने कंसोल में कोई त्रुटि मिल रही है? अर्थात। - क्या आपके सभी संसाधन सही तरीके से लोड हो रहे हैं? । कारण मैं पूछता हूं क्योंकि, मेरे डेवलपर वातावरण में: "//ajax.googleapis.com" मुझे परेशानी देता है जहां "एच टी टी पी: //ajax.googleapis.com" नहीं है। उस बिंदु पर: क्या आप मुझे अपने विकास ढेर के बारे में और बता सकते हैं - यानी। पेजों को WAMP, MAMP, RoRails, नोड प्रदान किया जा रहा है? सुनिश्चित नहीं है कि इनमें से कोई भी बहुत महत्वपूर्ण है, लेकिन कौन जानता है - मैं यह प्रश्न देखना चाहता हूं कि उत्तर दें। – sdailey

+0

सब कुछ लोड हो रहा है, यह सिर्फ एक साधारण है। एचटीएमएल फ़ाइल, – samuraiseoul

+0

मुझे लगता है कि हमें आपके सभी कोड की आवश्यकता है, या शायद आप इसे कहीं अपलोड कर सकते हैं? क्योंकि जब मैं आपके द्वारा प्रदान किए गए कोड का उपयोग करता हूं तो स्टाइलिंग ठीक काम करता है। – Jarno

उत्तर

16

मुझे लगता है कि समस्या यह है कि आप media="screen" के बजाय media="print" उपयोग करते हैं: यह सही वेबपेज है।

<link rel="stylesheet" href="print.css" type="text/css" media="print"/> 
<link rel="stylesheet" href="screen.css" type="text/css" media="screen"/> 

स्क्रीन एक के रूप में एक ब्राउज़र में देखा पेज के लिए स्टाइल में शामिल होंगे: दो अलग फ़ाइलों, प्रिंट के लिए एक और स्क्रीन के लिए एक बनाने का प्रयास करें। जब आप अपने पृष्ठ को प्रिंट करते हैं, या इस मामले में इसे पीडीएफ के रूप में सहेजते हैं तो प्रिंट में एक स्टाइल होगा।

संपादित

मैं jsPDF website जाँच की लेकिन मुझे लगता है वे सीएसएस समर्थन नहीं करते। आप हालांकि विभिन्न पाठ रंग के साथ एक दस्तावेज़ बनाने के लिए कुछ इस तरह कर सकता है:

doc.setFontSize(22); 
doc.setTextColor(255, 0, 0); 
doc.text(20, 20, 'This is a title'); 

doc.setFontSize(16); 
doc.setTextColor(0, 255, 0); 
doc.text(20, 30, 'This is some normal sized text underneath.'); 

अपनी स्क्रिप्ट में सही var doc = new jsPDF('landscape'); के तहत इस कोड रखो।

+0

मैंने अभी यह कोशिश की है और जब यह पृष्ठ सामान्य रूप से स्टाइल करता है, तब भी मैं पीडीएफ को स्टाइल करने के लिए इसे प्राप्त नहीं कर सकता जब मैं इसे पीडीएफ के रूप में सहेजता हूं। :( – samuraiseoul

+0

मुझे लगता है कि वे सीएसएस का समर्थन नहीं करते हैं, मेरे अपडेट किए गए उत्तर की जांच करें। – Jarno

+8

ठीक है, अगर मैं सीएसएस लागू नहीं कर सकता तो जेएसपीडीएफ मेरे लिए बेकार है, क्या आप किसी भी पुस्तकालय के बारे में जानते हैं जो मुझे एक उप-समूह की तस्वीर लेने देता है डीओएम? छवि या पीडीएफ? प्रारूप बहुत महत्वपूर्ण नहीं है यदि मैं आईडी द्वारा डोम के उप-तत्व को कैप्चर कर सकता हूं! – samuraiseoul

0

आप जेएसपीडीएफ के साथ एक स्क्रीनशॉट कैप्चर कर सकते हैं, लेकिन आपको html2canvas की भी आवश्यकता होगी। HTML को कैनवास में कनवर्ट करने और छवि सामग्री को पकड़ने के लिए html2canvas का उपयोग करें। jsPDF के साथ एक खाली पीडीएफ बनाएँ और पीडीएफ में एचटीएमएल छवि सामग्री जोड़ सकते हैं और बचाने के लिए:

html2canvas(*html*, { 
    onrendered: function(canvas) { 
    const contentDataURL = canvas.toDataURL('image/png') 
    let pdf = new jsPDF() 
    pdf.addImage(contentDataURL, 'JPEG', 20, 20) 
    pdf.save('form.pdf') 
    } 
}) 

यह सब सीएसएस बनी रहेगी लेकिन गुणवत्ता एक छोटे से (अस्पष्ट) भुगतना होगा।

0

आप this विकल्प कोशिश कर सकते हैं, कि jsPDF, html2canvas और html2pdf पुस्तकालयों

अपने README से

उपयोग करता है:

इस फ़ाइलों में शामिल हैं:

<script src="jspdf.min.js"></script> 
<script src="html2canvas.min.js"></script> 
<script src="html2pdf.js"></script> 

और फिर आप चलाकर अपने पीडीएफ उत्पन्न कर सकते हैं :

html2pdf($('body').get(0), { 
    margin:  1, 
    filename:  'myfile.pdf', 
    image:  { type: 'jpeg', quality: 0.98 }, 
    html2canvas: { dpi: 192, letterRendering: true }, 
    jsPDF:  { unit: 'in', format: 'letter', orientation: 'portrait' } 
}); 
संबंधित मुद्दे