html pdf chrome

HTML-PDF-Chrome

HTML إلى PDF أو Image (JPEG ، PNG ، WebP) محول عبر الكروم/الكروم.

المتطلبات الأساسية

• أحدث كروم/كروم
• Windows أو MacOS أو Linux
• نسخة مدعومة حاليًا من node.js

تثبيت

npm install --save html-pdf-chrome

حماية

لا تهدف هذه المكتبة إلى قبول مدخلات المستخدم غير الموثوق بها. قد يكون لدى القيام بذلك مخاطر أمنية خطيرة مثل التزوير طلب من جانب الخادم (SSRF).

كورس

إذا واجهت مشكلات CORS ، فحاول استخدام علامة Chrome- --disable-web-security ، إما عند بدء تشغيل Chrome خارجيًا ، أو في options.chromeFlags . يجب استخدام هذا الخيار فقط إذا كنت تثق تمامًا في الرمز الذي تنفذه أثناء وظيفة الطباعة!

الاستخدام

ملاحظة: يوصى بشدة أن تبقي Chrome تشغيل جنبًا إلى جنب مع Node.js. هناك نفقات كبيرة تبدأ من الكروم لكل جيل PDF يمكن تجنبها بسهولة.

يُقترح استخدام PM2 لضمان استمرار تشغيل Chrome. إذا تعطلت ، فسيتم إعادة التشغيل تلقائيًا.

حتى كتابة هذه السطور ، يستخدم Chrome Headless حوالي 65 ميجابايت من ذاكرة الوصول العشوائي أثناء الخمول.

 # install pm2 globally
npm install -g pm2
# start Chrome and be sure to specify a port to use in the html-pdf-chrome options.
pm2 start google-chrome 
  --interpreter none 
  -- 
  --headless 
  --disable-gpu 
  --disable-translate 
  --disable-extensions 
  --disable-background-networking 
  --safebrowsing-disable-auto-update 
  --disable-sync 
  --metrics-recording-only 
  --disable-default-apps 
  --no-first-run 
  --mute-audio 
  --hide-scrollbars 
  --remote-debugging-port= < port goes here >
# run your Node.js app.

TypeScript:

 import * as htmlPdf from 'html-pdf-chrome' ;

const html = '<p>Hello, world!</p>' ;
const options : htmlPdf . CreateOptions = {
  port : 9222 , // port Chrome is listening on
} ;

// async
const pdf = await htmlPdf . create ( html , options ) ;
await pdf . toFile ( 'test.pdf' ) ;
const base64 = pdf . toBase64 ( ) ;
const buffer = pdf . toBuffer ( ) ;
const stream = pdf . toStream ( ) ;

// Promise
htmlPdf . create ( html , options ) . then ( ( pdf ) => pdf . toFile ( 'test.pdf' ) ) ;
htmlPdf . create ( html , options ) . then ( ( pdf ) => pdf . toBase64 ( ) ) ;
htmlPdf . create ( html , options ) . then ( ( pdf ) => pdf . toBuffer ( ) ) ;
htmlPdf . create ( html , options ) . then ( ( pdf ) => pdf . toStream ( ) ) ;

جافا سكريبت:

 const htmlPdf = require ( 'html-pdf-chrome' ) ;

const html = '<p>Hello, world!</p>' ;
const options = {
  port : 9222 , // port Chrome is listening on
} ;

htmlPdf . create ( html , options ) . then ( ( pdf ) => pdf . toFile ( 'test.pdf' ) ) ;
htmlPdf . create ( html , options ) . then ( ( pdf ) => pdf . toBase64 ( ) ) ;
htmlPdf . create ( html , options ) . then ( ( pdf ) => pdf . toBuffer ( ) ) ;
htmlPdf . create ( html , options ) . then ( ( pdf ) => pdf . toStream ( ) ) ;

عرض الوثائق الكاملة في الكود المصدر.

الادخار كقطة شاشة

بشكل افتراضي ، يتم حفظ الصفحات كـ PDF. لتوفير لقطة شاشة بدلاً من ذلك ، فإن screenshotOptions . يمكن الاطلاع على جميع الخيارات المدعومة هنا.

 const htmlPdf = require ( 'html-pdf-chrome' ) ;

const html = '<p>Hello, world!</p>' ;
const options = {
  port : 9222 , // port Chrome is listening on
  screenshotOptions : {
    format : 'png' , // png, jpeg, or webp. Optional, defaults to png.
    // quality: 100, // Optional, quality percent (jpeg only)

    // optional, defaults to entire window
    clip : {
      x : 0 ,
      y : 0 ,
      width : 100 ,
      height : 200 ,
      scale : 1 ,
    } ,
  } ,
  // Optional. Options here: https://chromedevtools.github.io/devtools-protocol/tot/Emulation/#method-setDeviceMetricsOverride
  deviceMetrics : {
    width : 1000 ,
    height : 1000 ,
    deviceScaleFactor : 0 ,
    mobile : false ,
  } ,
} ;

htmlPdf . create ( html , options ) . then ( ( pdf ) => pdf . toFile ( 'test.png' ) ) ;

باستخدام موقع خارجي

 import * as htmlPdf from 'html-pdf-chrome' ;

const options : htmlPdf . CreateOptions = {
  port : 9222 , // port Chrome is listening on
} ;

const url = 'https://github.com/westy92/html-pdf-chrome' ;
const pdf = await htmlPdf . create ( url , options ) ;

باستخدام التخفيض

 import * as htmlPdf from 'html-pdf-chrome' ;
import * as marked from 'marked' ;

const options : htmlPdf . CreateOptions = {
  port : 9222 , // port Chrome is listening on
} ;

const html = marked ( '# Hello [World](https://www.google.com/)!' ) ;
const pdf = await htmlPdf . create ( html , options ) ;

باستخدام محرك قالب

Pug (المعروف سابقا باسم اليشم)

 import * as htmlPdf from 'html-pdf-chrome' ;
import * as pug from 'pug' ;

const template = pug . compile ( 'p Hello, #{noun}!' ) ;
const templateData = {
  noun : 'world' ,
} ;
const options : htmlPdf . CreateOptions = {
  port : 9222 , // port Chrome is listening on
} ;

const html = template ( templateData ) ;
const pdf = await htmlPdf . create ( html , options ) ;

رؤوس HTTP

حدد رؤوسًا إضافية ترغب في إرسالها مع طلبك عبر CreateOptions.extraHTTPHeaders .

 const options : HtmlPdf . CreateOptions = {
  port : 9222 , // port Chrome is listening on
  extraHTTPHeaders : {
    'Authorization' : 'Bearer 123' ,
    'X-Custom-Test-Header' : 'This is great!' ,
  } ,
} ;

const pdf = await HtmlPdf . create ( 'https://httpbin.org/headers' , options ) ;

رؤوس مخصصة وتذييلات

ملاحظة: يتطلب Chrome 65 أو أحدث.

يمكنك اختياريا توفير قالب HTML لرأس و/أو تذييل مخصص.

يمكن استخدام بعض الفئات لحقن قيم الطباعة:

• date - تاريخ الطباعة المنسق
• title - عنوان المستند
• url - موقع المستند
• pageNumber - رقم الصفحة الحالي
• totalPages - إجمالي الصفحات في المستند

يمكنك تعديل الهوامش مع printOptions من marginTop و marginBottom و marginLeft و marginRight .

في هذا الوقت ، يجب أن تضمن أي صور باستخدام ترميز BASE64.

يمكنك عرض كيف يضع Chrome القوالب هنا.

مثال

 const pdf = await htmlPdf . create ( html , {
  port ,
  printOptions : {
    displayHeaderFooter : true ,
    headerTemplate : `
      <div class="text center">
        Page <span class="pageNumber"></span> of <span class="totalPages"></span>
      </div>
    ` ,
    footerTemplate : '<div class="text center">Custom footer!</div>' ,
  } ,
} ) ;

الزناد تقديم الانتهاء

هناك عدد قليل من أنواع CompletionTrigger التي تنتظر حدوث شيء قبل تشغيل طباعة PDF.

• رد الاتصال - ينتظر استدعاء رد الاتصال
• العنصر - ينتظر حقن عنصر في DOM
• الحدث - ينتظر الحدث لإطلاق النار
• مؤقت - ينتظر قدرًا محددًا من الوقت
• LifeCyclevent - ينتظر حدث دورة حياة صفحة Chrome
• متغير - ينتظر ضبط متغير على true
• مخصص - تمديد htmlPdf.CompletionTrigger.CompletionTrigger

 const options : htmlPdf . CreateOptions = {
  port : 9222 , // port Chrome is listening on
  completionTrigger : new htmlPdf . CompletionTrigger . Timer ( 5000 ) , // milliseconds
} ;

// Alternative completionTrigger options:
new htmlPdf . CompletionTrigger . Callback (
  'cbName' , // optional, name of the callback to define for the browser to call when finished rendering.  Defaults to 'htmlPdfCb'.
  5000 // optional, timeout (milliseconds)
) ,

new htmlPdf . CompletionTrigger . Element (
  'div#myElement' , // name of the DOM element to wait for
  5000 // optional, timeout (milliseconds)
) ,

new htmlPdf . CompletionTrigger . Event (
  'myEvent' , // name of the event to listen for
  '#myElement' , // optional DOM element CSS selector to listen on, defaults to body
  5000 // optional timeout (milliseconds)
) ,

new htmlPdf . CompletionTrigger . LifecycleEvent (
  'networkIdle' , // name of the Chrome lifecycle event to listen for. Defaults to 'firstMeaningfulPaint'.
  5000 // optional timeout (milliseconds)
) ,

new htmlPdf . CompletionTrigger . Variable (
  'myVarName' , // optional, name of the variable to wait for.  Defaults to 'htmlPdfDone'
  5000 // optional, timeout (milliseconds)
) , 

رخصة

يتم إصدار HTML-PDF-Chrome بموجب ترخيص MIT.