0

使用 Apple MapKit 磁贴时，我在正确导出 PDF 时遇到问题。它适用于 Google 地图或 Bing 磁贴。

预期输出：

在此处输入图像描述

实际输出：

在此处输入图像描述

请注意图块缩放不正确。

如何重现该问题：

对本地 Puppeteer 服务器使用以下 curl 命令：

curl -X GET -G "http://localhost:8080" --data-urlencode "url=https://en.mycoursewalk.com/coursewalks/18624/print?print_pdf=true&unlisted_id=e61d9b86d7" --data-urlencode "page_orientation=Landscape" --data-urlencode "paper_size=Letter" --output "test.pdf"

您可以在浏览器中访问该页面：https ://en.mycoursewalk.com/coursewalks/18624/print?unlisted_id=e61d9b86d7

包.json

{
  "name": "chrome-puppeteer-pdf-export",
  "version": "1.0.1",
  "description": "",
  "engines": {
    "node": "12.22.6"
  },
  "main": "app.js",
  "directories": {
    "doc": "doc",
    "lib": "lib",
    "test": "test"
  },
  "scripts": {
    "start": "node app.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "dependencies": {
    "express": "^4.17.1",
    "valid-url": "^1.0.9",
    "puppeteer": "10.4.0"
  }
}

应用程序.js

const express = require('express');
const app = express();
const puppeteer = require('puppeteer');
const port = process.env.PORT || 8080;
const validUrl = require('valid-url');

const parseUrl = function(url) {
    url = decodeURIComponent(url);
    if (!/^(?:f|ht)tps?\:\/\//.test(url)) {
        url = 'http://' + url;
    }

    return url;
};

app.get('/', function(req, res) {
    const urlToScreenshot = parseUrl(req.query.url);

    if (validUrl.isWebUri(urlToScreenshot)) {
        console.log('Screenshotting: ' + urlToScreenshot);

        const page_orientation = req.query.page_orientation;
        const paper_size = req.query.paper_size;

        (async() => {

            let browser;
            try {
                browser = await puppeteer.launch({
                    args: ['--no-sandbox', '--disable-setuid-sandbox']
                });

                const page = await browser.newPage();
                await page.emulateMediaType('print');
                await page.setCacheEnabled(false);
                await page.setViewport({ width: 1024, height: 768, deviceScaleFactor: 2 });
                await page.goto(urlToScreenshot, { timeout: 30000, waitUntil: 'networkidle0' });
                await page.waitFor(250);
                await page.pdf({
                    format: paper_size,
                    landscape: (page_orientation === 'Landscape'),
                    margin: { top: 36, right: 36, bottom: 20, left: 36 },
                    printBackground: true
                }).then(function(buffer) {
                    res.setHeader('Content-Disposition', 'attachment;filename="export.pdf"');
                    res.setHeader('Content-Type', 'application/pdf');
                    res.send(buffer)
                });
            } catch (err) {
                console.log(err.message);
            } finally {
                if (browser) {
                    browser.close();
                }
            }

        })();
    } else {
        res.send('Invalid url: ' + urlToScreenshot);
    }

});

app.listen(port, function() {
    console.log('App listening on port ' + port)
});

更新

  • 问题只发生在最终以分数缩放级别结束的地图上。我允许 0.25 的缩放步长。
  • 该问题仅发生在 Apple MapKit 磁贴上。它适用于谷歌地图或必应。
  • 上面的预期输出屏幕截图是通过从 Google Chrome 浏览器打印到 PDF 获得的。地图也在浏览器中正确显示。该问题仅在使用 Puppeteer 生成 PDF 时发生
4

0 回答 0