css & no margin & print pdf

no header & no footer

https://stackoverflow.com/questions/46077392/additional-options-in-chrome-headless-print-to-pdf

@page {
margin: 0;
} @page {
margin-top: 0;
} @page {
margin-bottom: 0;
}

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);
});

css & no margin & print pdf的更多相关文章

  1. print pdf bug & DOCTYPE

    print pdf bug & DOCTYPE OK with <!DOCTYPE html> <!DOCTYPE html> <html lang=" ...

  2. CSS中margin和padding的区别

    在CSS中margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离.在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离. 下面讲解 padding和ma ...

  3. CSS中margin边界叠加问题及解决方案

    你对CSS的margin边界叠加的概念是否了解,这里和大家分享一下,当一个元素出现在另一个元素上面时,第一个元素的底边界与第二个元素的顶边界发生叠加. CSS的margin边界叠加深度剖析 边界叠加简 ...

  4. 怎样使用 css 的@media print控制打印

    怎样使用 css 的@media print控制打印? <HTML> <HEAD> <TITLE> New Document </TITLE> < ...

  5. CSS中margin边界叠加问题及解决方案(转)

    边界叠加简介 边界叠加是一个相当简单的概念.但是,在实践中对网页进行布局时,它会造成许多混淆.简单地说,当两个垂直边界相遇时,它们将形成一个边界.这个边界的高度等于两个发生叠加的边界的高度中的较大者. ...

  6. CSS中margin属性

    css中margin块级元素的垂直相邻外边距会合并,比如 方框的上下外边距并不是2px,而是合并为1px了. 设置float属性就可以避免这种同级元素边距合并

  7. 零点起飞学HTML+CSS (顼宇峰) PDF扫描版

    零点起飞学HTML+CSS系统地介绍了网站制作中各种常用的HTML标签和CSS属性,以及网站各个部分和各种布局的实现方法,还提供了大量实例来引导读者学习,力求让读者获得真正实用的知识.本书涉及面广,从 ...

  8. CSS Grid & Flex poster PDF 海报定制

    CSS Grid & Flex poster PDF 海报定制 CSS 手工实现 导出 SVG / PNG 导出 PDF 打印,定制海报 refs https://css-tricks.com ...

  9. CSS的margin塌陷(collapse)

    <!DOCTYPEHTML PUBLIC"-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head&g ...

随机推荐

  1. poj Find a multiple【鸽巢原理】

    参考:https://www.cnblogs.com/ACShiryu/archive/2011/08/09/poj2356.html 鸽巢原理??? 其实不用map但是习惯了就打的map 以下C-c ...

  2. idea下载安装指南

    官网地址 https://www.jetbrains.com/idea/ 点击download 有收费版本和社区免费版.我下载了免费的. 有zip和exe两个版本.我先下载了zip绿色版,发现用不了. ...

  3. 整数类型c++

    数据类型 定义标识符 占字节数 数值范围 数值范围 短整型 short [int] 2(16位) -32768-32767 -215-215-1 整型 [long] int 4(32位) -21474 ...

  4. 【js】callback时代的变更

    最近团队开始越来越多的使用es7标准的async/await,从最开始的promise到后面的generator,再到现在async,对于异步,每个时期都有着其特有的解决方案,今天笔者就以自己的接触为 ...

  5. ActiveMQ应用

    一. 概述与介绍 ActiveMQ 是Apache出品,最流行的.功能强大的即时通讯和集成模式的开源服务器.ActiveMQ 是一个完全支持JMS1.1和J2EE 1.4规范的 JMS Provide ...

  6. Modbus通讯协议简介

    Modbus协议简介 Modbus协议最初由Modicon公司开发出来,此协议支持传统的RS-232.RS-422.RS-485和以太网设备,许多工业设备,包括PLC,DCS,智能仪表等都在使用Mod ...

  7. python加载不了cookirlib模块的问题

    Python 3 改成 http.cookiejar了,所以import cookielib只要改成import http.cookiejar,就可以了.

  8. Tornado引入静态css、js文件

    一.静态路径 template_path=os.path.join(os.path.dirname(__file__), "templates") 这里是设置了模板的路径,放置模板 ...

  9. 【C++】朝花夕拾——中缀转后缀

    对于简单的四则运算而言,后缀表达式可以通过使用栈(stack)快速算出结果 ==================================我是分割线======================= ...

  10. jstree的基本使用例子

    var menu = (function() { var _menu = {data:{}, initMenu : function() { $.jstree.defaults.core.themes ...