首页 > 解决方案 > 您可以命名 Puppeteer 生成的 PDF 而不保存它吗?

问题描述

我刚刚得到了一个使用 Puppeteer 工作的 PDF 生成器。

我的页面上有一个按钮,它向我的 API 发送请求,而 API 又调用我的中间件函数来实际创建 PDF。PDF 被发送回浏览器。创建并单击链接(使用 JS)以在新选项卡中显示 PDF。

当 PDF 在浏览器中显示时,名称是一个看似随机的 GUID。

我想命名文件而不保存它。查看文档,我可以看到path可以设置变量的位置,但这会自动保存文件。

这是将数据发送到服务器并在新选项卡中接收/显示 PDF 的功能。

function printPDF() {
    var url = aName + "/api/PrintPDF/";
    var headers = []
    var xhr = new XMLHttpRequest();
    xhr.open('POST', url);
    xhr.setRequestHeader('DomainName', domainName);
    xhr.setRequestHeader("Content-Type", "application/json");

    xhr.responseType = 'arraybuffer';
    xhr.onreadystatechange = function(event) {
        if (this.readyState == 4 && this.status == 200) {
            const blob = new Blob([this.response], { type: 'application/pdf' })
            const link = document.createElement('a')
            link.href = window.URL.createObjectURL(blob)
            link.target = "_blank";
            //link.download = `your-file-name.pdf` //Works, but auto-saves the PDF
            //link.title = "Test Name"; //does not change name
            //link.id = "Test ID" //does not change name
            //link.name = "Test"//does not change name
            link.click()
        }
    }
    var data = JSON.stringify({ barcodeAppData: JSON.stringify(barcodeAppData) });
    xhr.send(data);
} 

中间件功能

exports.printPDF = async function(url) {
    const browser = await puppeteer.launch({ headless: true });
    const page = await browser.newPage();
    await page.goto(url, { waitUntil: 'networkidle0' });
    await page.evaluate(() => {
        document.querySelector('.pdfShow').style.display = "block"
    });
    await page.addStyleTag({
        content: `.pdfHide { display: none }; `
    });
    const pdf = await page.pdf({ printBackground: true, preferCSSPageSize: true });

    await browser.close();

    return pdf
};

标签: node.jspdfpuppeteer

解决方案


推荐阅读