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>