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. 在sql语句中使用关键字

    背景 开发过程中遇到了遇到了一句sql语句一直报错,看了一下字段名和表名都对应上了,但是还是一直报错 sql语句如下: update table set using = ""hh ...

  2. 小记 vue 打包(build)需要注意的一些事

    记录 vue 项目打包的一些事情 首先声明项目都是由 vue-cli 生成; vue 项目从 dev 切换到 prod 时有很多地方需要注意; 首先是大家最需要注意的 ajax 切换环节 以前一开始用 ...

  3. 使用 script 的 module 属性实现 es6 以上的兼容

    几个月前看到了这篇文章 https://philipwalton.com/articles/deploying-es2015-code-in-production-today/,给了我很大的启发,本来 ...

  4. MySql数据库创建表

    3.3.MySql数据库创建表 创建5个表: UserInfo用户基础表 Role 角色表 MenuInfo 菜单即控制表 Relation_Role_Menu 角色对应菜单关系表 RelaTion_ ...

  5. [BZOJ3223/Tyvj1729]文艺平衡树

    Description 您需要写一种数据结构(可参考题目标题),来维护一个有序数列 其中需要提供以下操作: 翻转一个区间,例如原有序序列是5 4 3 2 1,翻转区间是[2,4]的话,结果是5 2 3 ...

  6. EditText(6)EditText的子类

      1.Known Direct Subclasses AppCompatEditText, AutoCompleteTextView, ExtractEditText, GuidedActionEd ...

  7. OpenSSL 1.0.0生成p12、jks、crt等格式证书的命令个过程

    OpenSSL 1.0.0生成p12.jks.crt等格式证书的命令个过程   此生成的证书可用于浏览器.java.tomcat.c++等.在此备忘!     1.创建根证私钥命令:openssl g ...

  8. Codewars练习Python

    计算一个数组的中间数,数的两边和相等,并返回index值 如:数组[1,2,3,4,6] 返回3(数组序号从0开始) def find_even_index(arr): ""&qu ...

  9. IT项目为什么失败 --美国IT项目管理硕士笔记(一)

    IT项目为什么失败 什么是项目   项目可以被看作任何一系列的活动和任务.这些活动和任务有一个特定目标需要在特定要求下完成,并有一个明确的开始结束日期和资金限制(如果有).项目需要消耗人力或非人力资源 ...

  10. sql server nullif的使用技巧,除数为零的处理技巧

    在sql server中做除法处理的时候,我们经常需要处理除数为零的情况,因为如果遇到这种情况的时候,sqlserver会抛出遇到以零作除数错误的异常,我们总不希望把这个异常显示给用户吧. 做个会报这 ...