puppeteer & url to pdf & pdf print css bug All In One

puppeteer & url to pdf & pdf print css bug All In One

pdf print css bug

https://developer.mozilla.org/en-US/docs/Web/CSS/calc#Examples

css3 bug

@charset "UTF-8";

/* @media */

@media print {
    .noprint {
        display: none;
    }
    .h5-dnd-header-container {
        display: none;
    }
    .h5-dnd-body-container {
        float: none;
    }
    .h5-dnd-body-container {
        height: 100%;
        min-height: 3000px;
    }
    [data-div-inner-box="data-div-inner-box"] {
        width: calc(542px + 6px * 2);
    }
    [data-delete-span="delete-span"] {
        display: none;
    }
    [data-sortable-box*="sortable-box"] {
        margin: 0 auto;
        float: none;
    }
    .fv-left-box,
    .fv-center-box,
    .fv-right-box,
    .fv-all-box {
        margin-left: 0;
        page-break-after: always;
        page-break-inside: avoid;
    }
     ::-webkit-scrollbar {
        display: none;
    }
    [data-link*="fv-"]>a {
        display: none;
    }
}

https://wkhtmltopdf.org/libwkhtmltox/

https://github.com/wkhtmltopdf/wkhtmltopdf

https://wkhtmltopdf.org/

https://wkhtmltopdf.org/downloads.html
https://github-production-release-asset-2e65be.s3.amazonaws.com/271714/5b717b5e-6e42-11e8-8fbb-dbf7cd7a3324?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAIWNJYAX4CSVEH53A%2F20180919%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20180919T043838Z&X-Amz-Expires=300&X-Amz-Signature=4eb4c2f82be6f363d4dff0e0b9180ff8d7de2e33c17e4e934318715643fafe53&X-Amz-SignedHeaders=host&actor_id=29531779&response-content-disposition=attachment%3B filename%3Dwkhtmltox-0.12.5-1.msvc2015-win64.exe&response-content-type=application%2Foctet-stream

命令行工具

PATH 环境变量

admin & CMD

args

apis

https://www.jianshu.com/p/559c594678b6

https://www.jianshu.com/p/4d65857ffe5e

OK

url-to-pdf-api

https://github.com/alvarcarto/url-to-pdf-api#2-local-development

https://url-to-pdf-api.herokuapp.com/api/render

OK

GET

http://localhost:9000/api/render

http://localhost:9000/api/render?url=https://developer.mozilla.org/en-US/docs/Web/CSS/calc#Examples
http://localhost:9000/api/render?output=screenshot&url=https://developer.mozilla.org/en-US/docs/Web/CSS/calc#Examples

css3 layout & no query args url & bug

http://localhost:9000/api/render?url=http://10.1.5.202/bonds/fv/index.html
http://localhost:9000/api/render?output=screenshot&url=http://10.1.5.202/bonds/fv/index.html

http://localhost:9000/api/render?url=http://10.1.5.202/stock/f9/fastview/index.html
http://localhost:9000/api/render?output=screenshot&url=http://10.1.5.202/stock/f9/fastview/index.html

https://github.com/GoogleChrome/puppeteer/blob/v1.8.0/docs/api.md#environment-variables

https://zhaoqize.github.io/puppeteer-api-zh_CN/#/

media & print.css

url = `http://localhost:9000/api/render`,
    obj = {
        url: "http://10.1.5.202/stock/f9/fastview/index.html",
        output: "pdf",
        scrollPage: true,
        pdf: {
            landscape: true,
        },
        emulateScreenMedia: true,
        // output: "screenshot",
        ignoreHttpsErrors: true,
    };

fetch(url,
    {
        method: "POST",
        mode: "cors",
        headers: {
            "Content-Type": "application/json; charset=utf-8",
        },
        body: JSON.stringify(obj),
    })
    .then(res => res.blob())
    .then(blob => {
        // base64
        let objectURL = URL.createObjectURL(blob);
        let a = document.createElement(`a`);
        a.href = objectURL;
        let title = `test`;
        // png
        // a.setAttribute(`download`, `${title}.png`);
        // pdf
        a.setAttribute(`download`, `${title}.pdf`);
        a.click();
    })
    .catch((err) => {
        console.log(`There has been a problem with your fetch operation: `, err);
    });

demos

refs

---

---

©xgqfrms 2012-2021

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---