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. Linux 用户管理(2)

    Linux 用户管理2 添加修改和删除用户,必须是超级管理员root账号才可以进行的操作,所以当当前账号不是超级管理员root账号时,首先要先切换为root账号. 如图,ylq为普通用户,执行添加用户 ...

  2. P2973 [USACO10HOL]赶小猪

    跟那个某省省选题(具体忘了)游走差不多... 把边搞到点上然后按套路Gauss即可 貌似有人说卡精度,$eps≤1e-13$,然而我$1e-12$也可以过... 代码: #include<cst ...

  3. document.write()、onclick="alert(xxx)、innerHTML、image.src.match("xxx")、id2.style.color="blue";、isNaN(id2)、document.write("糟糕!文档消失了。")、alert(id2.outerHTML)、id2.className="id06";、onclick="return registe"

    <html> <head> <meta charset="utf-8"> <title>javascript</title&g ...

  4. WIN2012的桌面和开始菜单跑到什么地方去了

    传统开始菜单取消了,你把鼠标指针移动到左下角的边缘,会有一个小浮窗,就是开始,再点开始就能进到一个全屏的层里面,跟手机界面,那个玩意就是新一代的开始菜单,程序菜单,你在开始菜单上,鼠标右键点一下,下面 ...

  5. 403 Frog Jump 青蛙过河

    一只青蛙想要过河. 假定河流被等分为 x 个单元格,并且在每一个单元格内都有可能放有一石子(也有可能没有). 青蛙可以跳上石头,但是不可以跳入水中.给定石子的位置列表(用单元格序号升序表示), 请判定 ...

  6. .Net MVC 与WebApi ActionFilterAttribute 区别

    首先我们来看下 这两个ActionFilterAttribute 的命名空间区别的: 可以看出mvc 引用的是System.Web.Mvc,webapi 引用的是System.Web.Http.Fil ...

  7. php angular/think angular/php模版引擎

    在thinphp5中发现一个好用的模版引擎—think-angular, 此模板引擎主要特点是 不需要额外的标签定义, 全部使用属性定义, 写好的模板文件在IDE格式化代码的时候很整洁, 因为套完的模 ...

  8. 常用css属性总结

    边框修饰:border------>top,bottom,left,right上下左右边框 分为:color,类型style{ groove,dashed,ridge,solid}一个值---- ...

  9. 简单了解了下SEO与SEM的机制

    SEO:搜索引擎优化SEM:搜索引擎营销 SEO排名机制:搜索引擎蜘蛛 权重 算法 排名规则 搜索引擎提交入口: 1.百度搜索网站登入口 2.Google网站登入口 3.360搜索引擎登入入口 4.搜 ...

  10. HanLP自然语言处理包开源(包含源码)

    支持中文分词(N-最短路分词.CRF分词.索引分词.用户自定义词典.词性标注),命名实体识别(中国人名.音译人名.日本人名.地名.实体机构名识别),关键词提取,自动摘要,短语提取,拼音转换,简繁转换, ...