Vue-打印组件页面
场景: 需要将页面的局部信息打印出来,只在前端实现,不要占用后端的资源。经过百度经验,决定使用 print-js和html2canvas组件。
1. 下载包
npm install print-js --save
npm install --save html2canvas
2. 组件内引用
<script>import printJS from 'print-js'import 'print-js/dist/print.css'import html2canvas from 'html2canvas'</script>
3. 执行打印方法
<div><el-card style="height: 780px; overflow: auto;page-break-after:always;"><div ref="printPaperRef"><template v-for="index in 15"><!-- 题目: 序号、类型、题干 --><div><div class="num">{{index}}</div>【单选题】<div style="padding-left: 10px;">这是一道很难很难很难很难的单选题,{{index}}}</div></div><!-- 选项 --><el-radio-group style="width: 100%" ><el-radio v-for="item in ['A', 'B', 'C', 'D']" borderclass="answer_radio"><!-- 选项flex浮动 --><div style="display: inline-flex;width: 90%;"><div class="answer_tag">{{ item }}.</div></div><div style="float: right;"><i class="el-icon-success" style="color:#1aac1a;">答案</i></div></el-radio></el-radio-group></template></div></el-card>
</div>import printJS from 'print-js'import 'print-js/dist/print.css'import html2canvas from 'html2canvas'
export default {name: 'ExamProcess',methods: {// 打印试卷printPaper() {html2canvas(this.$refs.printPaperRef, {backgroundColor: 'white',useCORS: true,foreignObjectRendering: false,windowWidth: document.body.scrollWidth,windowHeight: document.body.scrollHeight}).then((canvas) => {const url = canvas.toDataURL()this.img = urlprintJS({printable: url,type: 'image',documentTitle: "--",base64: 'true'})})}}
}
遇到的问题:
1. html2canvas 文字向下偏移

解决: 使用html2canvas@^1.0.0的版本
2. html2canvas转图片不清晰的问题

解决: 利用增大dpi
dpi:DPI是指某些设备分辨率的度量单位。DPI越低,扫描的清晰度越低,DPI越高,清晰度越高。
由于受网络传输速度的影响,web上使用的图片都是72dpi,照片使用300dpi或者更高350dpi,会很清晰。
html2canvas(template, {dpi: 300,//加了一个这个设置 useCORS: true, //(图片跨域相关)allowTaint: false, //允许跨域(图片跨域相关)x: 0,//页面在横向方向上的滚动距离 横向上没有超过 所以设置为0y: window.pageYOffset,//页面在垂直方向上的滚动距离 设置了以后 超过一屏幕的内容也可以截取windowWidth: document.body.scrollWidth,//获取在x轴上滚动条中内容windowHeight: document.body.scrollHeight,//获取在y轴上滚动条中内容});
解决后的效果:

相关文章:
Vue-打印组件页面
场景: 需要将页面的局部信息打印出来,只在前端实现,不要占用后端的资源。经过百度经验,决定使用 print-js和html2canvas组件。 1. 下载包 npm install print-js --save npm install --save html2canvas 2. 组件内引用 <script>impo…...
Python爬虫——scrapy_基本使用
安装scrapy pip install scrapy创建scrapy项目,需要在终端里创建 注意:项目的名字开头不能是数字,也不能包含中文 scrapy startproject 项目名称 示例: scrapy startproject scra_baidu_36创建好后的文件 3. 创建爬虫文件&…...
30 | 中国高校数据分析
一、数据源 本项目使用了两个csv的数据文件,一个是中国高校(大学)的数据,一个是中国高校专业设置的数据 数据基本栏位:高校(大学)的数据高校专业设置的数据学校学校省份专业类别城市专业名称地址国家特色专业水平层次办学类别办学类型985211双一流二、数据分析目标 本…...
开源低代码平台Openblocks
网友 HankMeng 想看低代码工具,正好手上有一个; 什么是 Openblocks ? Openblocks 是一个开发人员友好的开源低代码平台,可在几分钟内构建内部应用程序。 传统上,构建内部应用程序需要复杂的前端和后端交互,…...
每日汇评:黄金在 200 日移动平均线附近似乎很脆弱,关注美国零售销售
1、金价预计将巩固其近期跌势,至 6 月初以来的最低水平; 2、对美联储再次加息的押注继续限制了贵金属的上涨; 3、金融市场现在期待美国零售销售报告带来一些有意义的推动; 周二金价难以获得任何有意义的牵引力,并在…...
DFT笔记 DC/AC mode与Func
DFT scan可以分为DC和AC两种,区别如下图 DC模式需要ate测试机台提供test clock时钟(最快100M),DFT工程师需要升级普通reg变成带si和so,se pin的reg,并插入扫描链(scan chain)&#x…...
docker核心操作
docker核心操作 1、docker安装(1)可选参数:(2)输出参数解释:2、docker镜像(1)拉取镜像:[https://www.docker.com/](https://www.docker.com/)3、运行docker镜像(1) 运行容器:(2) 挂载硬盘:4、docker容器的生命周期5.1、进入容器内部5.2、怎么解决Error: exec fai…...
《电路》基础知识入门学习笔记
文章目录: 一:电路模型和电路规律 1.电路概述 2.电路模型 3.基本电路物理量:电流、电压、电功率和能量 4.电流和电压的参考方向 5.电路元件—电阻 6. 电路元件—电压源和电流源 7.受控电源 8.基尔霍夫(后面都要用这个方法…...
什么是P2P?
P2P (Peer-to-Peer) 是一种分布式的网络架构,其中各个节点(通常被称为“peers”或“节点”)直接进行数据共享和交换,而无需依赖中央服务器。P2P 网络强调平等的参与和共享,每个节点既可以是数据的消费者(下…...
matlab RANSAC拟合多项式曲线
目录 一、功能概述1、算法概述2、主要函数3、参考文献二、代码实现三、结果展示四、参考链接本文由CSDN点云侠原创,原文链接。爬虫网站自重,把自己当个人。爬些不完整的误导别人有意思吗???? 一、功能概述 1、算法概述 使用RANSAC对点进行多项式拟合。...
微信小程序nfc指令异常记录
小程序nfc相关代码: readEvent(){wx.getNFCAdapter().startDiscovery({success:(res)>{console.log(--------------start--------)console.log(res);wx.getNFCAdapter().onDiscovered(callback>{console.log(------------onDiscovered----------)console.log(callback)…...
10 - 把间隔的几个commit整理成1个
查看所有文章链接:(更新中)GIT常用场景- 目录 文章目录 把间隔的几个commit整理成1个 把间隔的几个commit整理成1个...
关于 Eclipse 的一场 “三角关系”
上个世纪 90 年代,世界上的计算机要么不联网,要么在企业内部联网。但是,在互联网的概念下,计算机之间共享信息和资源的需求成为了必要。 1995 年 5 月,Java 横空出世。Java 的父亲是当时凭借 Solaris 操作系统风头正盛…...
koa 使用 Mongoose 查询数据
Mongosee 操作符koa 使用 Mongoose 进行 翻页查询koa 使用 Mongoose 进行 多条件查询 mongosee 操作符 在使用 Koa 和 Mongoose 进行数据库查询时,你可以使用以下常用的操作符来构建查询条件: $eq:等于 示例:{ field: { $eq: valu…...
前后端分离------后端创建笔记(10)用户修改
本文章转载于【SpringBootVue】全网最简单但实用的前后端分离项目实战笔记 - 前端_大菜007的博客-CSDN博客 仅用于学习和讨论,如有侵权请联系 源码:https://gitee.com/green_vegetables/x-admin-project.git 素材:https://pan.baidu.com/s/…...
K8S系列文章之 Docker安装使用Kafka
通过Docker拉取镜像的方式进行安装 照例先去DockerHub找一下镜像源,看下官方提供的基本操作(大部分时候官方教程比网上的要清晰一些,并且大部分教程可能也是翻译的官方的操作步骤,所以直接看官方的就行) 老实说Kafka…...
js如何获取字符串大小是几M
js如何获取字符串大小是几M 在JavaScript中,可以使用以下方法来获取字符串的大小(以字节为单位): function getStringSizeInBytes(str) {// 使用UTF-8编码计算字符串的字节长度let totalBytes new Blob([str]).size;// 将字节长…...
服务器托管中1U是什么意思?
U的概念 U是一种表示服务器外部尺寸的单位,是unit的缩略语。 1U4.44514.445cm 2U4.44528.89cm 4U4.445*413.335cm 在托管服务器时,服务商经常说的“1U”是外形满足EIA(美国电子工业协会)规格、厚度为4.445cm的产品,设…...
Golang自定义类型与类型别名
type myInt int32 与 type myInt int32,概念并不相同 自定义类型:type myInt int32 通过这种方式定义的类型是一个全新的类型,这个新类型与int32有相同的底层结构,但是却与int32类型不兼容。 type myInt int32var a int32 5 var…...
golang环境搭建
1. 下载、安装 wget -O go.tar.gz https://golang.google.cn/dl/go1.21.0.linux-amd64.tar.gz sudo rm -rf /usr/local/go && sudo tar -zxvf go.tar.gz -C /usr/local2.创建工作目录 cd mkdir -p go/{bin,pkg,src}3.添加环境变量 sudo vim /etc/profile写入以下…...
SCAU期末笔记 - 数据分析与数据挖掘题库解析
这门怎么题库答案不全啊日 来简单学一下子来 一、选择题(可多选) 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘:专注于发现数据中…...
postgresql|数据库|只读用户的创建和删除(备忘)
CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...
2021-03-15 iview一些问题
1.iview 在使用tree组件时,发现没有set类的方法,只有get,那么要改变tree值,只能遍历treeData,递归修改treeData的checked,发现无法更改,原因在于check模式下,子元素的勾选状态跟父节…...
用docker来安装部署freeswitch记录
今天刚才测试一个callcenter的项目,所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...
【Oracle】分区表
个人主页:Guiat 归属专栏:Oracle 文章目录 1. 分区表基础概述1.1 分区表的概念与优势1.2 分区类型概览1.3 分区表的工作原理 2. 范围分区 (RANGE Partitioning)2.1 基础范围分区2.1.1 按日期范围分区2.1.2 按数值范围分区 2.2 间隔分区 (INTERVAL Partit…...
Docker 本地安装 mysql 数据库
Docker: Accelerated Container Application Development 下载对应操作系统版本的 docker ;并安装。 基础操作不再赘述。 打开 macOS 终端,开始 docker 安装mysql之旅 第一步 docker search mysql 》〉docker search mysql NAME DE…...
【Go语言基础【13】】函数、闭包、方法
文章目录 零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理 二、函数类型与高阶函数1. 函数类型定义2. 高阶函数(函数作为参数、返回值) 三、匿名函数与闭包1. 匿名函数(Lambda函…...
安全突围:重塑内生安全体系:齐向东在2025年BCS大会的演讲
文章目录 前言第一部分:体系力量是突围之钥第一重困境是体系思想落地不畅。第二重困境是大小体系融合瓶颈。第三重困境是“小体系”运营梗阻。 第二部分:体系矛盾是突围之障一是数据孤岛的障碍。二是投入不足的障碍。三是新旧兼容难的障碍。 第三部分&am…...
Razor编程中@Html的方法使用大全
文章目录 1. 基础HTML辅助方法1.1 Html.ActionLink()1.2 Html.RouteLink()1.3 Html.Display() / Html.DisplayFor()1.4 Html.Editor() / Html.EditorFor()1.5 Html.Label() / Html.LabelFor()1.6 Html.TextBox() / Html.TextBoxFor() 2. 表单相关辅助方法2.1 Html.BeginForm() …...
jmeter聚合报告中参数详解
sample、average、min、max、90%line、95%line,99%line、Error错误率、吞吐量Thoughput、KB/sec每秒传输的数据量 sample(样本数) 表示测试中发送的请求数量,即测试执行了多少次请求。 单位,以个或者次数表示。 示例:…...
