vue/js 调用系统打印功能进行图片(imgUrl,base64)，表格，自定义内容，页面局部区域打印【print-js、html2canvas】

1.打印图片(imgUrl)

   <template><div><button @click="jsonPrint">打印</button></div>
</template><script lang="ts">
import printJS from "print-js";
export default {setup() {function jsonPrint() {// printJS('https://printjs.crabbly.com/images/print-03.jpg', 'image')// printJS({printable: 'https://printjs.crabbly.com/images/print-03.jpg', type: 'image', header: 'My cool image header'})printJS({printable: ["https://printjs.crabbly.com/images/print-03.jpg","https://printjs.crabbly.com/images/print-03.jpg","https://printjs.crabbly.com/images/print-03.jpg",],type: "image",header: "Multiple Images",imageStyle: "width:100%;height:100%; margin-bottom:0px;",});}return {jsonPrint,};},
};
</script>

2.打印图片(base64)

   <template><div><button @click="jsonPrint">打印</button></div>
</template><script lang="ts">
import printJS from "print-js";export default {setup() {var imgUrl ="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBMaWNlbnNlOiBQRC4gTWFkZSBieSBNYXJ5IEFrdmVvOiBodHRwczovL21hcnlha3Zlby5jb20vIC0tPgo8c3ZnIGZpbGw9IiMwMDAwMDAiIHdpZHRoPSI4MDBweCIgaGVpZ2h0PSI4MDBweCIgdmlld0JveD0iMCAwIDI0IDI0IiBpZD0iYmxvb2QiIGRhdGEtbmFtZT0iTGluZSBDb2xvciIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBjbGFzcz0iaWNvbiBsaW5lLWNvbG9yIj48cGF0aCBpZD0icHJpbWFyeSIgZD0iTTE4LDE1QTYsNiwwLDAsMSw2LDE1YzAtNCwyLTUsNi0xMkMxNiwxMCwxOCwxMSwxOCwxNVoiIHN0eWxlPSJmaWxsOiBub25lOyBzdHJva2U6IHJnYigwLCAwLCAwKTsgc3Ryb2tlLWxpbmVjYXA6IHJvdW5kOyBzdHJva2UtbGluZWpvaW46IHJvdW5kOyBzdHJva2Utd2lkdGg6IDI7Ij48L3BhdGg+PC9zdmc+";function jsonPrint() {printJS({printable: imgUrl, //表格的数据type: "image",imageStyle: "width:100%;height:100%; margin-bottom:0px;",});}return {jsonPrint,};},
};
</script>

3.打印表格

<template><div style="color: #fff"><button @click="jsonPrint">打印</button></div>
</template><script lang="ts">
import printJS from "print-js";
import { reactive, ref } from "vue";
export default {setup() {const nav: any = reactive([{id: 1,text: "任务达成：工作成绩考核（满分5分））",num: "任务达成",input: "",powerOutageTotalNum: "powerOutageTotalNum",},{id: 2,text: "成本控制：工作任务中的各项费用、物资、时间成本管控（满分5分）",num: "成本控制",input: "",powerOutageTotalNum: "powerOutageTotalNum",},{id: 3,text: "岗位意识：本职工作整体认知及达成效果（满分5分）",num: "岗位意识",input: "",powerOutageTotalNum: "powerOutageTotalNum",},]);function jsonPrint() {printJS({printable: nav, //表格的数据properties: [//表头{ field: "id", displayName: "地区", columnSize: `10%` },{ field: "text", displayName: "确认跳闸条数", columnSize: `65%` },{ field: "num", displayName: "误报条数" },{ field: "input", displayName: "跳闸总条数" },{field: "powerOutageTotalNum",displayName: "误报指数",columnSize: `10%`,},],type: "json",gridHeaderStyle: "border: 1px solid #000;text-align:center",gridStyle: "border: 1px solid #000;text-align:center",style:" span {color :red ;width: 300px;border: 1px solid #000;	display: flex; }", // 表格样式});}return {nav,jsonPrint,};},
};
</script>

4.打印自定义内容

<template><div class="print-div" id="print_area" style="color: #fff"><div type="flex" class="example-body"><div:flex="2"class="demo-uni-col dark_deep"v-for="item in list":key="item.id"><p>{{ item.text }}</p><p><inputtype="number"class="inputNumber":min="0":max="10"v-model="item.input"/></p></div></div><button @click="printSomething">打印</button></div>
</template>
<script lang="ts">
import printJS from "print-js";
import { reactive } from "vue";export default {setup() {const list: any = reactive([{id: 1,text: "出勤情况：满勤，无请假迟到早退等情况（满分10分）",num: "出勤情况",input: "",},{id: 2,text: "工作积极性：主动承担分内工作，对本人职责范围内的工作无推诿（满分10分）",num: "工作积极性",input: "",},{id: 3,text: "责任意识：本职工作有责任心，及时完成交付的工作，无拖延（满分10分）",num: "责任意识",input: "",},{id: 4,text: "协作与配合：与上下级，同事工作配合度（满分10分）",num: "协作与配合",input: "",},]);function printSomething() {// 此处的style即为打印时的样式const style ="@page {  } " +"@media print { .print-div{ padding:8px;background-color:#cccccc;line-height:12px } .red{ color:#f00} .green{color:green}";printJS({printable: "print_area",type: "html",style: style, // 亦可使用引入的外部css;scanStyles: false,});}return {list,printSomething,};},
};
</script>
<style>
</style>

5.打印echarts图

 <template><div><divref="chartContainer1"class="chartContainer1"style="height: 503px"></div><button @click="jsonPrint">打印</button></div>
</template><script setup>
import printJS from "print-js";
import * as echarts from "echarts";const data = reactive({options1: {// backgroundColor:'rgba(13, 32, 59, 0.5)',tooltip: {trigger: "axis",axisPointer: {type: "cross", // 鼠标放上去显示横纵坐标刻度线animation: true,color: "#fff",},},grid: {containLabel: true,borderWidth: 1,// borderColor: "red",top: 50,bottom: 30,left: 24,right: 30,textStyle: {color: "rgba(255,255,255,0.5)",fontSize: 30,},},xAxis: {name: "",type: "category",axisLine: {lineStyle: {color: "RGBA(120, 127, 142, 1)",},onZero: false,},axisLabel: {color: "rgba(255,255,255,0.5)",fontSize: 24,},minorSplitLine: {show: true,},data: [],},yAxis: [{min: -40,max: 40,interval: (40 - -40) / 5,type: "value",name: "温度：℃",nameTextStyle: {// 设置温度单位的样式color: "rgba(255,255,255,0.5)",fontSize: 32, // 设置字体大小为32px},splitLine: {show: true,lineStyle: {color: "rgba(255,255,225,0.25)", // 竖线颜色为红色width: 1, // 线宽type: "solid", // 线型},},axisLine: {lineStyle: {color: "rgba(255,255,255,0.7)",},},axisLabel: {// 添加axisLabel属性fontSize: 24, // 设置字体大小为14pxcolor: "rgba(255,255,255,0.5)",},},{min: -60,max: 100,interval: (100 - -60) / 5,type: "value",name: "湿度：%rh",nameTextStyle: {// 设置温度单位的样式color: "rgba(255,255,255,0.5)",fontSize: 32, // 设置字体大小为32px},splitLine: {show: true,lineStyle: {color: "rgba(255,255,225,0.25)", // 竖线颜色为红色width: 1, // 线宽type: "solid", // 线型},},axisLine: {lineStyle: {color: "rgba(255,255,255,0.7)",},},axisLabel: {textStyle: {fontSize: 24,color: "rgba(255,255,255,0.5)",},formatter: "{value}",},},],series: [{yAxisIndex: 0,name: "温度",type: "line",smooth: true,symbolSize: 0,symbol: "circle",data: [1, 2, 3, 4],fontSize: "46px",itemStyle: { color: "RGBA(22, 171, 255, 1)" },// itemStyle: { color: 'red',fontSize: '46px' },animation: false, //关闭动画效果，为了打印的时候能显示曲线areaStyle: {color: {type: "line",x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: "rgba(22, 171, 255,0.50)",},{offset: 1,color: "rgba(22, 171, 255,0.01)",},],global: false,},},},{yAxisIndex: 1,name: "湿度",type: "line",smooth: true,symbolSize: 0,symbol: "circle",data: [5, 6, 7, 8],itemStyle: { color: "RGBA(90, 216, 166, 1)" },animation: false, //关闭动画效果，为了打印的时候能显示曲线areaStyle: {color: {type: "line",x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: "rgba(90, 216, 166,1)",},{offset: 1,color: "rgba(90, 216, 166,0)",},],global: false,},},},],legend: {icon: "circle", //形状  类型包括 circle，rect,line，roundRect，triangle，diamond，pin，arrow，noneitemWidth: 22, // 设置宽度itemHeight: 22, // 设置高度itemGap: 80, // 设置间距data: ["温度", "湿度"],//   right: 30,//   top:0,textStyle: {color: "rgba(255,255,255,0.5)",fontSize: 32,},},},
});const { options1 } = toRefs(data);
const chartContainer1 = ref(null);
let chart1 = null;var imgUrl = "";
function jsonPrint() {imgUrl = chart1.getDataURL({type: "png", //jpeg | jpegpixelRatio: 1,backgroundColor: "#000", //背景色白色});console.log(imgUrl);printJS({printable: imgUrl, //表格的数据type: "image",imageStyle: "width:100%;height:100%; margin-bottom:0px;",});
}onMounted(() => {//echart图表-开始chart1 =echarts.getInstanceByDom(chartContainer1.value) ||echarts.init(chartContainer1.value);// 渲染图表chart1.setOption(options1.value);});
</script>

6.打印页面局部区域

   <template><div><divid="myId"style="height: 200px; width: 100%; background: yellowgreen"></div><button @click="jsonPrint">打印</button></div>
</template><script setup>
import printJS from "print-js";
import html2canvas from "html2canvas";function jsonPrint() {html2canvas(document.getElementById("myId"), {scale: window.devicePixelRatio * 4, //设置缩放,用于让图像显示更清晰dpi: 1,}).then((canvas) => {var heatmapBase64 = canvas.toDataURL("image/png", 1);printJS({printable: heatmapBase64, //图片的数据type: "image",imageStyle:"width:50%;height:50%; display: flex;justify-content: center;align-items: center;margin:0 auto;",});});
}
</script>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/658082.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

使用.NET6 Avalonia开发跨平台三维应用

使用.NET6 Avalonia开发跨平台三维应用

本文介绍在Vistual Studio 2022中使用Avalonia和集成AnyCAD Rapid AvaloniaUI三维控件的过程。 0 初始化环境 安装Avalonia.Templates dotnet new install Avalonia.Templates若之前安装过可忽略此步骤。 1 创建项目 选择创建AvaloniaUI项目 选一下.NET6版本和Avalonia版…
阅读更多...
detectron2的read_image方法

detectron2的read_image方法

在看代码的时候&#xff0c;看到一行注释&#xff1a;use PIL, to be consistent with evaluation 说是用PIL方法加载&#xff0c;却又看见了BGR这种表述&#xff0c;后面的调用也都是cv2格式&#xff1a; 那我就要看下这里面是怎么实现的了&#xff0c;找到了read_image函数&…
阅读更多...
[R] Why data manipulation is crucial and sensitive?

[R] Why data manipulation is crucial and sensitive?

What does a data scientist really do? Identifying the pattern in cultural consumption, making fancy graph, engage a dialogue between data and the existing literature, refining hypothesis….(done within one months with three to four online meetings with p…
阅读更多...
app的启动

app的启动

前言 本篇文章讲解ios的应用程序的启动 应用程序的加载 点击一个app 首先&#xff0c;我们在手机上点击一个app图标 内核初始化 操作系统收到启动app的消息后&#xff0c;会调用内核代码初始化内存空间&#xff0c;为app创建进程然后操作系统通过系统调用读取并解析app的…
阅读更多...
apktool 简单快速 反编译apk获取图片资源

apktool 简单快速 反编译apk获取图片资源

apktool:下载地址&#xff1a;iBotPeaches / Apktool / Downloads — Bitbucket把 myapp.apk 和 apktool_2.9.3.jar 放在同一文件夹&#xff0c;注意不要有中文路径 java -jar apktool_2.9.3.jar d -f myapp.apk -o myapp java -jar: java 执行jar命令 apktool_2.9.3.jar: a…
阅读更多...
C语言实现的数组合并与排序程序

C语言实现的数组合并与排序程序

引言 在本篇博客中&#xff0c;我们将详细解析一段C语言代码&#xff0c;该代码实现了从用户处接收两个整数数组&#xff0c;将它们合并为一个数组后进行排序&#xff0c;并最终输出排序后的结果。这段代码主要涵盖了数组操作、数据输入、冒泡排序算法以及数据输出等核心编程概…
阅读更多...
【涵子来信】——拆机，感想

【涵子来信】——拆机，感想

大家好&#xff0c;我是涵子。 初中的第一个学期结束了&#xff0c;来临寒假。我在寒假做了一件有趣的事情&#xff1a;拆机&#xff0c;修手机。今天我来分享分享这件事情。 拆机 情况介绍 拆机对象&#xff1a; iPhone 6 Plus 情况&#xff1a; 电池健康度100%&#xff08…
阅读更多...
按身高和体重排队（100%用例）C卷(JavaPythonC++Node.jsC语言)

按身高和体重排队（100%用例）C卷(JavaPythonC++Node.jsC语言)

某学校举行运动会，学生们按编号 (1 、 2 、 3 … n) 进行标识，现需要按照身高由低到高排列，对身高相同的人，按体重由轻到重排列；对于身高体重都相同的人，维持原有的编号顺序关系。请输出排列后的学生编号。 输入描述: 两个序列，每个序列由n个正整数组成（0 < n <…
阅读更多...
Unity-WebGL

Unity-WebGL

问题&#xff1a;提示gzip压缩报错解决&#xff1a;关闭打包的地方压缩&#xff0c;如下图问题&#xff1a;窗口未全屏解决&#xff1a;使用百分比画布替换固定尺寸画布 参考&#xff1a;新版Unity打包Webgl端进行屏幕自适应_unity webgl分辨率自适应-CSDN博客问题&#xff1a;…
阅读更多...
GBASE数据库注册例程的权限

GBASE数据库注册例程的权限

要在数据库中注册例程&#xff0c;被授权的用户将 SPL 命令包含在 CREATE FUNCTION 或 CREATE PROCEDURE 语句中。数据库服务器存储内部注册了的 SPL 例程。下列用户具 有在数据库中注册新的例程的资格&#xff1a; • 有 DBA 权限的任何用户可在 CREATE 语句中&#xff0c;使…
阅读更多...
Springboot+Redis

Springboot+Redis

首先前提我们要在自己的本机电脑或者服务器上安装一个redis的服务器 Redis配置 添加依赖： <!-- SpringBoot Boot Redis --> <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artif…
阅读更多...
MicroPython核心：编译器

MicroPython核心：编译器

MicroPython编译过程包括以下步骤&#xff1a; 词法分析器将MicroPython程序文本流转换为标记。语法解释器将标记转换为抽象语法&#xff08;语法树&#xff09;。根据语法书输出字节码或本地代码。 本文以给MicroPython增加一个简单的语言特性为例来说明这一过程&#xff1a…
阅读更多...
Linux Archcraft结合内网穿透实现SSH远程连接

Linux Archcraft结合内网穿透实现SSH远程连接

文章目录 1. 本地SSH连接测试2. Archcraft安装Cpolar3. 配置 SSH公网地址4. 公网远程SSH连接5. 固定SSH公网地址6. SSH固定地址连接7. 结语 Archcraft是一个基于Arch Linux的Linux发行版&#xff0c;它使用最简主义的窗口管理器而不是功能齐全的桌面环境来提供图形化用户界面。…
阅读更多...
JVM 内存模型

JVM 内存模型

1 什么是 JVM 内存模型 JVM 需要使用计算机的内存&#xff0c;Java 程序运行中所处理的对象或者算法都会使用 JVM 的内 存空间&#xff0c;JVM 将内存区划分为 5 块&#xff0c;这样的结构称之为 JVM 内存模型。 2 JVM 为什么进行内存区域划分 随着对象数量的增加&#xff…
阅读更多...
马哈鱼SQLFlow Lite的python版本

马哈鱼SQLFlow Lite的python版本

Gudu SQLFlow 是一款用来分析各种数据库的 SQL 语句和存储过程来获取复杂的数据血缘关系并进行可视化的工具。 Gudu SQLFlow Lite version for python 可以让 python 开发者把数据血缘分析和可视化能力快速集成到他们自己的 python 应用中。 Gudu SQLFlow Lite version for p…
阅读更多...
Banana Pi BPI-R4开源路由器开发板快速上手用户手册，采用联发科MT7988芯片设计

Banana Pi BPI-R4开源路由器开发板快速上手用户手册，采用联发科MT7988芯片设计

介绍 Banana Pi BPI-R4 路由器板采用 MediaTek MT7988A (Filogic 880) 四核 ARM Corex-A73 设计&#xff0c;4GB DDR4 RAM&#xff0c;8GB eMMC&#xff0c;板载 128MB SPI-NAND 闪存&#xff0c;还有 2x 10Gbe SFP、4x Gbe 网络端口&#xff0c;带 USB3 .2端口&#xff0c;M.2…
阅读更多...
计算机服务器中了halo勒索病毒怎么办，halo勒索病毒解密

计算机服务器中了halo勒索病毒怎么办，halo勒索病毒解密

在网络技术飞速发展的今天&#xff0c;越来越多的企业依赖数字化办公&#xff0c;为企业的生产生活提供了极大便利&#xff0c;但网络是一把双刃剑&#xff0c;网络安全威胁无处不在。近期&#xff0c;云天数据恢复中心接到很多企业的求助&#xff0c;企业的计算机服务器中了ha…
阅读更多...
【Java】实现图书管理系统

【Java】实现图书管理系统

文章目录 1. 设计背景2. 需求分析3. 设计思路4. 实现4.1 book包4.1.1 Book类4.1.2 BookList类(书架) 4.2 user包4.2.1 User 类4.2.2 AdminUser类&#xff08;管理员用户&#xff09;4.2.3 NormalUser类&#xff08;普通用户&#xff09; 4.3 operation包4.3.1 IOPeration接口4.…
阅读更多...
Maven基本使用

Maven基本使用

Maven简介: Apache Maven 是一个项目管理和构建工具&#xff0c;它基于项目模型(POM)的概念&#xff0c;通过一小段描述信息来管理项目的构建&#xff0c;报告和文档 Maven的作用: (1&#xff09;项目搭建&#xff1b; &#xff08;2&#xff09;依赖管理&#xff1b; &#xf…
阅读更多...
[力扣 Hot100]Day16 除自身以外数组的乘积

[力扣 Hot100]Day16 除自身以外数组的乘积

题目描述 给你一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&#xff0c;且在 O(n…
阅读更多...
最新文章

Copyright @ 2022~2023