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://www.qianduange.cn/upload/article/print-03.jpg', 'image')
      // printJS({printable: 'https://www.qianduange.cn/upload/article/print-03.jpg', type: 'image', header: 'My cool image header'})
      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() {
      // 此处的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>
 复制