浏览器打印

最新推荐文章于 2024-10-31 15:50:03 发布

笑道三千

最新推荐文章于 2024-10-31 15:50:03 发布

阅读量285

点赞数

分类专栏： # element ui后台管理系列文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_42349568/article/details/126406904

版权

element ui后台管理系列专栏收录该内容

56 篇文章 5 订阅

订阅专栏

参考文章：https://blog.csdn.net/wangxiaoan1234/article/details/76032901

一，概述

前端调用接口，返回html，然后使用window.print()来实现打印。

二，实现


```cpp
      // 打印报表
  handlePrintHtml(params, that) {
    let printHtmlUrl = `${that.$baseAPIs.serverOne}/OrderExport?`;
    that
      .axios({
        url: printHtmlUrl,
        method: 'get', // 默认值
        dataType: 'json',
        params:params
      })
      .then(response => {
        var printWin = window.open('打印窗口', '_blank');
        printWin.document.write(response.data);
        //开始修改样式
        const handelStyle =
          'h1{text-align:center;font-size:30px} table{width:100%;border-collapse:collapse;border-spacing:0px;test-align:center;font-size:20px} td{text-align:center;}';
        addNewStyle(printWin.document, handelStyle);
        printWin.document.close();
        printWin.print();
        printWin.close();
      })
      .catch(error => {
        console.log(error);
      });
  },
  //给新打开的窗口增加样式文件
  addNewStyle(el, newStyle) {
    let styleElement = document.createElement('style');
    styleElement.appendChild(document.createTextNode(newStyle));
    el.getElementsByTagName('head')[0].appendChild(styleElement);
  },