1.打印图片(imgUrl)
<template>
<div>
<button @click="jsonPrint">打印</button>
</div>
</template>
<script lang="ts">
import printJS from "print-js";
export default {
setup() {
function jsonPrint() {
printJS({
printable: [
"https://www.qianduange.cn/upload/article/print-03.jpg",
"https://www.qianduange.cn/upload/article/print-03.jpg",
"https://www.qianduange.cn/upload/article/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>
<input
type="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() {
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,
scanStyles: false,
});
}
return {
list,
printSomething,
};
},
};
</script>
<style>
</style>
5.打印echarts图
<template>
<div>
<div
ref="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: {
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
animation: true,
color: "#fff",
},
},
grid: {
containLabel: true,
borderWidth: 1,
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,
},
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: {
fontSize: 24,
color: "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,
},
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)" },
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",
itemWidth: 22,
itemHeight: 22,
itemGap: 80,
data: ["温度", "湿度"],
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",
pixelRatio: 1,
backgroundColor: "#000",
});
console.log(imgUrl);
printJS({
printable: imgUrl,
type: "image",
imageStyle: "width:100%;height:100%; margin-bottom:0px;",
});
}
onMounted(() => {
chart1 =
echarts.getInstanceByDom(chartContainer1.value) ||
echarts.init(chartContainer1.value);
chart1.setOption(options1.value);
});
</script>
6.打印页面局部区域
<template>
<div>
<div
id="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>