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

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> <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() { // 此处的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> <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: { // 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, // 设置字体大小为14px 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, // 设置字体大小为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，none itemWidth: 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 | jpeg pixelRatio: 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> <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>