2017-06-15 10 views
8

पर प्रिंट करते समय डिफ़ॉल्ट हेडर/फ़ूटर को बदलें, मैं पीडीएफ में एचटीएमएल प्रस्तुत करने के लिए फैंटॉमजेएस के प्रतिस्थापन के रूप में Google क्रोम का उपयोग करने की कोशिश कर रहा हूं। अब तक यह मेरे लिए अच्छा काम कर रहा है। केवल मुद्दा मुझे लगता है कि मैं निम्नलिखित PhantomJS कोड का अनुवाद करने में किसी भी तरह से नहीं मिला है है:पीडीएफ

page.paperSize = { 
    footer: { 
    contents: phantom.callback(function(pageNum, numPages) { 
     return "Power by MyWebsite. Created on "+formatDate(new Date())+"<span style='float:right'>" + pageNum + "/" + numPages + "</span>"; 
    }) 
    } 
} 

स्वरूप तिथि विचाराधीन रूप में एक ही कार्य है How to format a JavaScript date

हालांकि मैं इस को दोहराने के लिए एक तरह से नहीं मिला है हेडलेस में Google क्रोम में व्यवहार।

return new Promise(async function (resolve, reject) { 
    const url = "<MyURL here>"; 
    const [tab] = await Cdp.List() 
    const client = await Cdp({ host: '127.0.0.1', target: tab }); 
    await Promise.all([ 
     Network.enable(), 
     Page.enable() 
    ]); 

    Page.loadEventFired(function() { 
     setTimeout(function() { 
      resolve(Page.printToPDF({displayHeaderFooter:true}))); //https://chromedevtools.github.io/devtools-protocol/tot/Page/#method-printToPDF 
     }, 3000); 
    }); 
    await Page.navigate({ url }); 
}; 

मैं पीडीएफ ठीक हो रही है लेकिन केवल डिफ़ॉल्ट क्रोम शीर्षलेख और पादलेख प्राप्त कर सकते हैं:

यह मेरा क्रोम दूरस्थ इंटरफ़ेस कोड की एक रूपरेखा है। उन्हें संशोधित करने का कोई तरीका?

नोट: मुझे लगता है कि मैं प्रत्येक पृष्ठ के नीचे करने के लिए तत्वों संलग्न करने के लिए अपने पृष्ठ में जावास्क्रिप्ट का उपयोग कर सकते हैं, लेकिन मैं पाद लेख है कि जब/मुद्रण निर्यात के रूप में मैं ब्राउज़र द्वारा जोड़ा जाता है को बदलने के लिए पसंद करते हैं हमने पाया कि पृष्ठ में अन्य divs के किसी भी अजीब पुन: बहने के बिना सही ढंग से और बिना किसी अजीब पुन: बहने के लिए यह अधिक विश्वसनीय है।

+0

जब क्रोम खिड़की मोड में है, तो भी इसे बदलने शीर्ष लेख और पाद सामग्री का समर्थन नहीं करता, इसलिए मुझे लगता है कि हेडलेस विधि भी इसका समर्थन नहीं करेगी। यह आपके कोड में लिंक (https://chromedevtools.github.io/devtools-protocol/tot/Page/#method-printToPDF) से स्पष्ट है कि ऐसे पैरामीटर –

+0

जावास्क्रिप्ट के साथ नहीं हैं आप तत्वों को जोड़ने के बारे में कैसे जाएंगे प्रत्येक पृष्ठ का शीर्ष? मैं समझता हूं कि हम दस्तावेज़ के शीर्ष पर तत्व जोड़ सकते हैं लेकिन अंतिम पीडीएफ में हम प्रत्येक पृष्ठ के शीर्ष पर कैसे लक्षित करेंगे? – kyriakos

+0

@kyriakos आपको संभव होने के लिए प्रत्येक पृष्ठ तत्व को अपने स्वयं के 'div' में होना चाहिए। यह एक समाधान है, लेकिन एक अच्छा समाधान नहीं है। – apokryfos

उत्तर

3

this forum के अनुसार, वहाँ वर्तमान में गूगल क्रोम में यह करने के लिए कोई रास्ता नहीं है। आप जो भी कर सकते हैं वह हेडर/फ़ूटर को चालू या बंद कर देता है। यह टिप्पणी द्वारा इंगित किया गया है:

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

वहाँ कर सकते हैं - आप Chrome वेब स्टोर की जाँच करने के लिए अगर कोई काम तीसरे पक्ष एक्सटेंशन जो आप Chrome पर स्थापित कर सकते हैं फिट हो सकता है कि आप क्या मुद्रण के संदर्भ में की तलाश कर रहे हैं देखने के लिए चाहते हो सकता है जो कार्यक्षमता आप ढूंढ रहे हैं उसे प्राप्त करने के लिए तृतीय-पक्ष एक्सटेंशन बनें, या जैसा कि आप सुझाव देते हैं, आप उन तत्वों को जोड़ने के लिए जावास्क्रिप्ट का उपयोग कर सकते हैं जिन्हें आप मुद्रित करना चाहते हैं।

5

आपकी समस्या

ए) क्रोम हैडर कोई मार्जिन को छोड़ कर बाहर पुश करने के लिए दो समाधान हैं:

@page { 
    margin: 0; 
    size: auto; 
} 

या

@media print { 
    @page { margin: 0; } 
    body { margin: 1.6cm; } 
} 

बी) मूल रूप से एक फ़ायरफ़ॉक्स समाधान जो क्रोम

<html moznomarginboxes mozdisallowselectionprint> 
0 के लिए दुनिया चाहिए

कुछ नमूना:

<!DOCTYPE html> 
 
<html moznomarginboxes mozdisallowselectionprint> 
 
<head> 
 
<title>Print PDF without header</title> 
 
<style> 
 
@media print { 
 
    @page { margin: 0; } 
 
    body { margin: 1.6cm; } 
 
} 
 
</style> 
 
</head> 
 
<body> 
 
<p>Some Text in Paragraph to print!</p> 
 
<a href="javascript:print()">Print</a> 
 
</body> 
 
</html>

+0

प्रश्न डिफ़ॉल्ट क्रोम हेडर/पाद लेखों को धक्का देने के बारे में नहीं है, यह उन्हें अनुकूलित करने के बारे में है। – apokryfos

+0

ठीक है क्रोम व्यवहार तब होता है जब आप इसे दबाते हैं, हेडर विकल्प समाप्त हो जाएगा, यह अजीब है लेकिन यह सच है, इसे आज़माएं और देखेंगे हेडर चेकबॉक्स चला गया है –

3

<header> और <footer> टैग का उपयोग करके कस्टम हेडर और पाद लेख बनाना संभव है। मैं क्रोम हेडलेस का उपयोग करके पीडीएफ बनाने के लिए इसका इस्तेमाल करता हूं। मैंने फ़ायरफ़ॉक्स, आईई आदि में इसका परीक्षण नहीं किया है ...

<header> 
    Custom Header 
    <img src="http://imageurl.com/image.jpg"/> 
</header> 
<div class="content">Page Content - as long as you want</div> 
<footer> 
    Footer Content 
</footer> 

सीएसएस

@page { 
    margin: 0; 
} 
@media print { 
    footer { 
    position: fixed; 
    bottom: 0; 
    } 
    header { 
    position: fixed; 
    top: 0; 
    } 
} 

@page { margin: 0 } डिफ़ॉल्ट शीर्षलेख और पादलेख निकाल देता है।

उम्मीद है कि इससे मदद मिलती है।

0

यह प्रश्न का एक अद्यतन/उत्तर है। क्रोमियम 64 के रूप में यह printToPDF

उदाहरण कोड को headerTemplate और footerTemplate मानकों का प्रयोग करके कि काम करना चाहिए संभव है:

return new Promise(async function (resolve, reject) { 
    const url = "<MyURL here>"; 
    const [tab] = await Cdp.List() 
    const client = await Cdp({ host: '127.0.0.1', target: tab }); 
    await Promise.all([ 
     Network.enable(), 
     Page.enable() 
    ]); 

    Page.loadEventFired(function() { 
     setTimeout(function() { 
    //https://chromedevtools.github.io/devtools-protocol/tot/Page/#method-printToPDF 
      resolve(Page.printToPDF({ 
        displayHeaderFooter:true, 
        footerTemplate: "<span class='pageNumber'> of <span class='totalPages'>" 
      }))); 
     }, 3000); 
    }); 
    await Page.navigate({ url }); 
};