web-dev-qa-db-ja.com

作成PDF

私はJavaScriptを初めて使用し、pdfkitを使用して、Firebase関数からPDFファイルを作成しようとしています。以下が関数コードです。

const pdfkit = require('pdfkit');
const fs = require('fs');

exports.PDFTest = functions.https.onRequest((req, res) => {

var doc = new pdfkit();

var loremIpsum = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam in...';  

doc.y = 320;
doc.fillColor('black')
doc.text(loremIpsum, {
paragraphGap: 10,
indent: 20,
align: 'justify',
columns: 2
});  

doc.pipe( res.status(200) )

});

関数は開始しますが、タイムアウトエラーが発生します。これはFirebaseでPDFファイルを作成する最善の方法ですか? PDFファイルにしたいHTMLがあります。

11
user1184205

これにも取り組んで、PDFをストレージに保存する場合、このように機能します

const myPdfFile = admin.storage().bucket().file('/test/Arbeitsvertrag.pdf');
const doc = new pdfkit();
const stream = doc.pipe(myPdfFile.createWriteStream());
doc.fontSize(25).text('Test 4 PDF!', 100, 100);
doc.end();

return res.status(200).send();

ストリームが閉じられるまで待って、Errors and Thingsをリッスンする必要があると思いますが、これは私が作成できた最初の実用的な例であり、ストレージからPDFに画像を取得する方法に取り組んでいます。

4
Chris

私もこれに取り組みました。以下は、FirebaseストレージでホストされているテンプレートHTMLからPDFファイルを作成しているクラウド関数のサンプルです。Hanldebarsを使用してテンプレートにデータを適用しますその後、Firebaseストレージに再度アップロードします。ここではnode-html-pdfを使用しました。

const functions = require('firebase-functions');
const admin = require('firebase-admin');
const pdf = require('html-pdf');
const gcs = require('@google-cloud/storage')({
  projectId: '[YOUR PROJECT ID]',
  //key generated from here https://console.firebase.google.com/project/_/settings/serviceaccounts/adminsdk?authuser=1
  keyFilename: '[YOUR KEY]'
});
const handlebars = require('handlebars');
const path = require('path');
const os = require('os');
const fs = require('fs');
const bucket = gcs.bucket('[YOUR PROJECT ID].appspot.com');

admin.initializeApp(functions.config().firebase);

exports.helloWorld = functions.https.onRequest((request, response) => {
  // data to apply to template file
  const user = {
    "date": new Date().toISOString(),
    "firstname" : "Guillaume",
  };
  const options = {
    "format": 'A4',
    "orientation": "portrait"
  };
  const localTemplate = path.join(os.tmpdir(), 'localTemplate.html');
  const localPDFFile = path.join(os.tmpdir(), 'localPDFFile.pdf');

  bucket.file('template.html').download({ destination: localTemplate }).then(() => {
    console.log("template downloaded locally");
    const source = fs.readFileSync(localTemplate, 'utf8');
    const html = handlebars.compile(source)(user);
    console.log("template compiled with user data", html);

    pdf.create(html, options).toFile(localPDFFile, function(err, res) {
      if (err){
        console.log(err);
        return response.send("PDF creation error");
      }
      console.log("pdf created locally");

      return bucket.upload(localPDFFile, { destination: user.name + '.pdf', metadata: { contentType: 'application/pdf'}}).then(() => {
        response.send("PDF created and uploaded!");
      }).catch(error => {
        console.error(error);
        response.send("PDF created and uploaded!");
      });
  });
  });
});

これがこれを行う次の人を助けることを願っています:)

13

私はギヨームの提案を試みました、そしてそれはALMOSTが私をそこに連れて行きました。残念ながら、Phantomjsは終了せずに終了していました。

Guillaumeのソリューションと https://phantomjscloud.com (およびそれらのライブラリ)を組み合わせることで、これを解決しました。今では、すべてが魅力のように機能しています。

「ユーザーデータを使用してコンパイルされたテンプレート」の後に、次のものを置き換えます。

 const phantomJsCloud = require("phantomjscloud");
 const browser = new phantomJsCloud.BrowserApi([YOURPHANTOMJSCLOUDAPIKEY]);

 var pageRequest = { content: html, renderType: "pdf" }; 

 // Send our HTML to PhantomJS to convert to PDF

 return browser.requestSingle(pageRequest)
      .then(function (userResponse) {
          if (userResponse.statusCode != 200) {
               console.log("invalid status code" + userResponse.statusCode);
            } else {
               console.log('Successfully generated PDF');

               // Save the PDF locally
               fs.writeFile(localPDFFile, userResponse.content.data, {
                           encoding: userResponse.content.encoding,
                       }, function (err) {                             
                           // Upload the file to our cloud bucket
                           return pdfBucket.upload(localPDFFile, { destination: 'desired-filename.pdf', metadata: { contentType: 'application/pdf'}}).then(() => {
                             console.log('bucket upload complete: '+ localPDFFile);
                           }).catch(error => {
                             console.error('bucket upload error:', error);
                           });
                       });

                   }

                   });
3
Bryan Lewis

少し遅れました。

https://edgecoders.com/generating-a-pdf-with-express-in-node-js-d3ff5107dff1


import * as functions from 'firebase-functions';
import * as PDFDocument from 'pdfkit';

export const yourFunction = functions
  .https
  .onRequest((req,  res) => {
    const doc = new PDFDocument();
    let filename = req.body.filename;
    // Stripping special characters
    filename = encodeURIComponent(filename) + '.pdf';
    // Setting response to 'attachment' (download).
    // If you use 'inline' here it will automatically open the PDF
    res.setHeader('Content-disposition', 'attachment; filename="' + filename + '"');
    res.setHeader('Content-type', 'application/pdf');
    const content = req.body.content;
    doc.y = 300;
    doc.text(content, 50, 50);
    doc.pipe(res);
    doc.end();
  });

これが誰にも役立つことを願っています

1

OPと同じものを検索しているときにこの質問に遭遇しましたが、私の特定のケースでは、ライブラリーの切り替えはオプションではなく、PDFを直接出力することに特に興味がありました。

正常に動作し、OPが実行していたことと比較した後、欠落していたのは、データをフラッシュするためのdoc.end()だけでした。

Firebase Functionによって出力されているPDFKitのデモは次のとおりです。

const PDFDocument = require('pdfkit');

exports.PDFTest = functions.https.onRequest((req, res) => {

    var doc = new PDFDocument();

    // draw some text
    doc.fontSize(25)
       .text('Here is some vector graphics...', 100, 80);

    // some vector graphics
    doc.save()
       .moveTo(100, 150)
       .lineTo(100, 250)
       .lineTo(200, 250)
       .fill("#FF3300");

    doc.circle(280, 200, 50)
       .fill("#6600FF");

    // an SVG path
    doc.scale(0.6)
       .translate(470, 130)
       .path('M 250,75 L 323,301 131,161 369,161 177,301 z')
       .fill('red', 'even-odd')
       .restore();

    // and some justified text wrapped into columns
    doc.text('And here is some wrapped text...', 100, 300)
       .font('Times-Roman', 13)
       .moveDown()
       .text("... lorem ipsum would go here...", {
         width: 412,
         align: 'justify',
         indent: 20,
         columns: 2,
         height: 300,
         Ellipsis: true
       });


    doc.pipe(res.status(200));

    doc.end();

});

これは非常に単純な例であり、おそらく適切なヘッダーを送信する必要がありますが、最新のブラウザーと同様に機能します。これが同じものを探している人に役立つことを願っています。

0
lbarbosa