当前位置： 首页 > news >正文

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

news 2025/11/4 15:36:27

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>
http://www.dtcms.com/a/7979.html

相关文章：

  • MavenGradle等引入jSerialComm
  • xss 盲打使用
  • 实现vue3响应式系统核心-shallowReactive
  • 【国产MCU】-CH32V307-通用DMA控制器及使用
  • 云微呼AI外呼：数字时代营销的智能引擎
  • 【30秒看懂大数据】变量
  • 8、应急响应-战前溯源反制主机蜜罐系统HFishHIDSElkeidWazuh
  • 在QT Creator中打开一个包含CMakeLists.txt的项目时，只打开CMakeLists.txt文件而没有自动打开其他文件
  • mongodb config
  • linux 组建和卸载raid1、raid0详细操作
  • PYTHON蓝桥杯——每日一练（简单题）
  • sql注入之union联合注入
  • 留学生怎么合理使用ChatGPT ？还有哪些同类工具可以使用？
  • 算法练习02——双指针
  • react useCallback(记忆函数）用法
  • 互联网加竞赛 基于深度学习的动物识别 - 卷积神经网络 机器视觉 图像识别
  • 【SVN在Linux下的常用指令】
  • LeetCode 每日一题Day 54 - 61
  • C语言实现12种排序算法
  • 记录element-plus树型表格的bug
  • MySQL常用命令集
  • linux ln命令-linux软链接、硬链接-linux软、硬链接的区别(一)：硬链接
  • 【ArcGIS微课1000例】0096：dem三维块状表达（层次地形模型）
  • Java实现学生信息管理系统：从Excel中提取数据的实用方法
  • STM32MP135开发板助力电力行业，IEC61850协议移植笔记
  • 关于使用js的循环语句打印一个金字塔的三种方案
  • 百川终入海 ，一站式海量数据迁移工具 X2Doris 正式发布
  • Oracle RMAN全备脚本（正式测试可行）
  • 【Redis】Redis集群方案应该怎么做 都有哪些方案
  • 安装配置hive