我有一个用node.js编写的API,托管在heroku上,我的前端应用程序是用Vue.js编写的,它是在hostinger上.我想知道是否有可能生成一个带有Puppeter的PDF文件,并立即发送到前端客户端,而不必先将其保存到磁盘?如果是的话,你能给我举一些如何做的例子吗?

目前我的功能是:

exports.gerarPDFAvaliacao = async (dadosAvaliacao) => {
    try {
        const compile = async (fileName, data) => {

            const filePath = path.join(process.cwd(), 'src/templates/client/operation/', `${fileName}.hbs`);
            const html = await fs.readFile(filePath, 'utf-8');
            return await hbs.compile(html)(data);
        }

        const browser = await puppeteer.launch();
        const page = await browser.newPage();

        let content = await compile('avaliations', dadosAvaliacao);

        await page.goto(`data:text/html,${content}`, { waitUntil: 'networkidle0' });
        await page.emulateMedia('screen');
        await page.pdf({
            path: 'src/dist/pdf/' + dadosAvaliacao.arquivo + '.pdf',
            format: 'A4',
            printBackground: true
        })
        await browser.close();

        return dadosAvaliacao.arquivo + '.pdf';
    } catch (error) {
        console.log('Errors => ', error);
    }
};

推荐答案

根据official documentation,如果不提供路径,文件将不会保存到磁盘.

页pdf(选项):

这意味着它应该返回一个缓冲区或生成文件的二进制表示形式.您只需要将其返回或通过管道发送到响应,具体取决于您使用的框架.

这只是将pdf输出到控制台:

<密码>const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://example.com');

console.log(await page.content());
const pdf = await page.pdf();

await browser.close();
console.log(pdf) // maybe do response(pdf).type('x-pdf')

编辑:下面是一个使用express和Puppeter直接在内存中返回pdf内容的完整示例.它在runkit上运行,所以我认为同样的限制也适用(可能更多).如果导航到示例中的公共端点,您可以看到浏览器如何检测到它是pdf文件并正确呈现它.

密码

<密码>const puppeteer = require ('puppeteer');
const express = require('express');
var app = express(exports);
const browser = await puppeteer.launch();

const main = async () => {

    const page = await browser.newPage();
    await page.goto('https://example.com');

    const pdf = await page.pdf();
    return pdf;
 }


app.get('/', async function (req, res) {
        const pdf = await main();
        res.contentType("application/pdf");
        res.send(pdf);
});

app.listen(3000, function(){ console.log('Listening on 3000') });

Vue.js相关问答推荐

如何将 cogo toast PRIVE集成到nuxt3中?

如何在AXIOS调用响应中动态导入视频并创建它的绝对路径?

我在 nuxt2 中看不到索引页

为什么普通对象在 Vue3 中自动变成响应式的?

如何在 vue2.7 中删除 slot-scope

webpack vue-loader 配置

如何在 vuejs 自定义指令中传递动态参数

一个 div 组件中的 Vue.js 2.0 路由链接

Vuejs模板继承

如何在 Vue.js 中获取组件元素的 offsetHeight?

Vue Cli 3 不允许我在 Webpack 中处理 SVG

如何避免在 Vue 中一直写 this.$store.state.donkey 的需要?

在路由更改之前显示确认对话框

将 SignalR 与 Vue.js 和 Vuex 集成

emit更新数组不起作用

VueJS 路由 - 使用子路由和 Vuetify 时如何停止多个活动路由(active routes)?

使密码字符隐藏在 Vuetify 字段中

如何在 Promise 回调中更新 Vue 应用程序或组件的属性?

在 Vue 应用程序中创建一个类的单个实例

如何访问通用 javascript 模块中的当前路由元字段