精华内容
下载资源
问答
  • Print.js
    2022-05-10 10:44:56

    下载print.js文件

    在main.js中配置

    // 打印插件

    import Print from '@/plugs/print'

    Vue.use(Print)

    // 打印插件
    import Print from '@/plugs/print'
    Vue.use(Print)

    使用方法

    <template>
      <div class="myResume">
        <section ref="print" id="print" style="width:100%;position: relative">
          123456
        </section>
        <el-button type="primary" plain @click="print()" style="margin-top:30px"
          >打印</el-button
        >
      </div>
    </template>
    <script>
    export default {
      methods: {
        print() {
          this.$print(this.$refs.print);
        },
      },
    };
    </script>

    如果想修改打印纸上的样式

    	@media print {
    		/* .contents {
    			margin-left: 0px !important;
    		}
    
    		.mianer /deep/.el-main {
    			padding: 0 !important;
    		} */
    	}

    如果想让那一个地方不出现在打印纸上就 在哪个上面加上 class=‘no-print’

    <Nav class="no-print" />

    更多相关内容
  • 本文主要介绍了vue项目中使用print.js打印,解决多页,分页,打印预览样式修改等问题。 引入安装vue-print.js cnpm i vue-printjs --save-dev 解决打印多页只出现一页问题 由于打印插件存在问题,如果打印文件...
  • 网上找的print.js做了修改,支持Echarts图表这里记录一下,不知道是哪家的代码了,我看都一样 这里是看到了两个源码 https://github.com/xyl66/vuePlugs_printjs/blob/master/print.js ...
  • jQuery.print.js

    2020-07-22 16:14:43
    jQueryPrint.js打印网页jQueryPrint.js打印网页JS,很好用,可以指定打印网页上特定的资源!
  • print.min.js

    2020-06-23 11:17:24
    $Print(el, options): el:Element 要打印区域的 DOM 节点 options:Object 额外的配置项 beforeStart:Function 打印前的回调 finish:Function 打印完成的回调 backgroundColor:String 设置打印区域背景色 如果...
  • jQueryPrint.js打印网页

    2018-05-22 15:14:03
    jQueryPrint.js打印网页JS,很好用,可以指定打印网页上特定的资源!
  • Print.js 一个小的javascript库,可帮助您从网络上打印。 有关文档和示例,请访问: 安装 您可以从下载最新版本的Print.js,或使用文档页面上可用的 。 通过npm安装: npm install print-js --save 通过纱线...
  • jquery.print.js

    2019-09-18 16:30:58
    这个插件是基于jquery-print.js进行了我自己的改造,用来打印canvas中的内容。
  • 代码高亮插件prettyPrint.js使用与下载-附件资源
  • crabbly print.js

    2018-07-02 13:19:58
    crabbly print.js类库 下载后直接引包使用,使用详情请参考:https://blog.csdn.net/WwJoyous/article/details/80881881
  • 使用print.js实现打印

    2022-07-30 10:46:12
    打印获取dom节点需要使用ref,如果直接通过id或class获取,webpack打包部署后打印内容为空。下载后,放在utils路径下。main.js文件中引入。

    下载print.js
    https://github.com/xyl66/vuePlugs_printjs
    下载后,放在utils路径下

    导入
    main.js文件中引入

    import Print from '@/utils/print';
    Vue.use(Print);
    

    在页面上使用

    // 打印的弹框
    <el-dialog
      title="报告"
      width="1054px"
      :visible.sync="reportVisible"
      style="height: 800px; overflow: auto"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
    
      <!-- 打印的内容 -->
      <reportPrintDia ref="reportPrint" :printData="baseData" id="pdfDom" />
      
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="getPdf()">PDF打印</el-button>
        <el-button type="primary" @click="outputPrint">打印</el-button>
        <el-button type="danger" @click="getBackInfo">返回</el-button>
      </div>
    </el-dialog>
    

    注意:打印获取dom节点需要使用ref,如果直接通过id或class获取,webpack打包部署后打印内容为空。

    // 打印
    outputPrint() {
      console.log(this.$refs.reportPrint.$refs.toPrint);
        const dom = window._.get(this, '$refs.reportPrint.$refs.toPrint', null);
        if (dom) {
            this.$print(dom, { 'no-print': '.no-want-print' });
        } else {
            console.error('dom找不到');
        }
    },
    
    // 打印样式 比如
    @media print {
    	/* @page规则允许指定页面盒子多个方面 */
    	/* @page不要嵌套在容器中,与其他dom无关 */
    	@page {
    	  /* 纵向打印 */
    	  // size: portrait;
    	
    	  /* 横向打印 */
    	  size: landscape;
    	  
    	  /* 指定尺寸 5.5*8.5英尺 */
    	  size: 5.5in 8.5in;
    	  
    	  /* 指定纸质尺寸 A4或legal*/
    	  size: A4;
    	
    	  /* 去掉页眉页脚*/
    	  margin-top: 0;
    	  margin-bottom: 0;
    	}
    	
    	/* 页面左边距,右边距 为装订边留出更多的空间,用户也可以不用 */
    	/* 与布局是横向和纵向的也有关系 */
    	@page :left {
    	    margin-left: 2.5cm;
    	    margin-right: 2.7cm;
    	}
    	
    	@page :right {
    	    margin-left: 2.7cm;
    	    margin-right: 2.5cm;
    	}
    	/* @page :first 选文档第一页 */
    	/* 首页上页边距设置为 10cm */
    	@page :first {
    	    margin-top: 10cm; 
    	}
    
    }
    
    展开全文
  • 没什么╱╲╲╱╲╲╲╱╲╱╲╱╲╱╱╲╲╲╲╲╲╱╱╲╱╲╲╲╱╱╲╲10PRINT.js 这是我在Node.js中编写的程序,它使用一条语句重新创建了简洁的单行程序10PRINT。 10PRINT是在Commodore 64上用BASIC编写的已有...
  • js实现打印 print.js

    千次阅读 2020-12-25 15:53:32
    下面介绍 2种 方式使用print.js库实现打印 第一种: (可加上样式) 安装 npm install print-js --save 引入 import print from 'print-js' 使用 –html部分 <div> <p>test prin.

    如果单纯实现打印整个窗口, window.print() 就能实现,但是我们往往要打印一个区域或者说一个div块
    由于print打印的是整个窗体,所以我们要把打印区域变成窗体,所以我们需要一个库,来实现这些事

    下面介绍 2种 方式使用print.js库实现打印

    第一种: (可加上样式)

    安装

    npm install print-js --save
    

    引入

    import print from 'print-js'
    

    使用

    –html部分

    <div>
        <p>test print</p>
        <div class="print-div" id="print_area">
            <p class="red">世上本没有路,走的人多了,便有了路 ---- 鲁迅</p>
            <p class="green">世上本没有路,走的人多了,便有了路 ---- 鲁迅</p>
            <p>世上本没有路,走的人多了,便有了路 ---- 鲁迅</p>
            <p>世上本没有路,走的人多了,便有了路 ---- 鲁迅</p>
        </div>
        <button @click="printSomething">打印</button>
    </div>
    

    –js部分

    printSomething(){
        // 此处的style即为打印时的样式
        const style = '@page {  } ' +'@media print { .print-div{ padding:8px;background-color:#cccccc;line-height:12px } .red{ color:#f00} .green{color:green}' ;
        print({
            printable: 'print_area',
            type: 'html',
            style: style,// 亦可使用引入的外部css;
            scanStyles: false
        })
    }
    

    第二种: (本地print.js的CDN,在vue中引用的例子)

    引入 (vue项目的main.js中)

    import Print from '@/utils/print.js'
    
    Vue.use(Print)
    

    使用

    –html部分

    <section ref="print" class="recordImg" id="printRecord">
       <img :src="image" alt="">
    </section>
    <span slot="footer" class="dialog-footer">
       <el-button @click="recordVisible = false">取 消</el-button>
       <el-button type="primary" @click="PrintRow">打 印</el-button>
    </span>
    

    –js部分

    //打印
    PrintRow(index, row){
    	this.$print(this.$refs.print) // 使用
    },
    

    print.js源码

    // 打印类属性、方法定义
    /* eslint-disable */
    const Print = function (dom, options) {
      if (!(this instanceof Print)) return new Print(dom, options);
     
      this.options = this.extend({
        'noPrint': '.no-print'
      }, options);
     
      if ((typeof dom) === "string") {
        this.dom = document.querySelector(dom);
      } else {
        this.isDOM(dom)
        this.dom = this.isDOM(dom) ? dom : dom.$el;
      }
     
      this.init();
    };
    Print.prototype = {
      init: function () {
        var content = this.getStyle() + this.getHtml();
        this.writeIframe(content);
      },
      extend: function (obj, obj2) {
        for (var k in obj2) {
          obj[k] = obj2[k];
        }
        return obj;
      },
     
      getStyle: function () {
        var str = "",
          styles = document.querySelectorAll('style,link');
        for (var i = 0; i < styles.length; i++) {
          str += styles[i].outerHTML;
        }
        str += "<style>" + (this.options.noPrint ? this.options.noPrint : '.no-print') + "{display:none;}</style>";
     
        return str;
      },
     
      getHtml: function () {
        var inputs = document.querySelectorAll('input');
        var textareas = document.querySelectorAll('textarea');
        var selects = document.querySelectorAll('select');
     
        for (var k = 0; k < inputs.length; k++) {
          if (inputs[k].type == "checkbox" || inputs[k].type == "radio") {
            if (inputs[k].checked == true) {
              inputs[k].setAttribute('checked', "checked")
            } else {
              inputs[k].removeAttribute('checked')
            }
          } else if (inputs[k].type == "text") {
            inputs[k].setAttribute('value', inputs[k].value)
          } else {
            inputs[k].setAttribute('value', inputs[k].value)
          }
        }
     
        for (var k2 = 0; k2 < textareas.length; k2++) {
          if (textareas[k2].type == 'textarea') {
            textareas[k2].innerHTML = textareas[k2].value
          }
        }
     
        for (var k3 = 0; k3 < selects.length; k3++) {
          if (selects[k3].type == 'select-one') {
            var child = selects[k3].children;
            for (var i in child) {
              if (child[i].tagName == 'OPTION') {
                if (child[i].selected == true) {
                  child[i].setAttribute('selected', "selected")
                } else {
                  child[i].removeAttribute('selected')
                }
              }
            }
          }
        }
     
        return this.dom.outerHTML;
      },
     
      writeIframe: function (content) {
        var w, doc, iframe = document.createElement('iframe'),
          f = document.body.appendChild(iframe);
        iframe.id = "myIframe";
        //iframe.style = "position:absolute;width:0;height:0;top:-10px;left:-10px;";
        iframe.setAttribute('style', 'position:absolute;width:0;height:0;top:-10px;left:-10px;');
        w = f.contentWindow || f.contentDocument;
        doc = f.contentDocument || f.contentWindow.document;
        doc.open();
        doc.write(content);
        doc.close();
        var _this = this
        iframe.onload = function(){
          _this.toPrint(w);
          setTimeout(function () {
            document.body.removeChild(iframe)
          }, 100)
        }
      },
     
      toPrint: function (frameWindow) {
        try {
          setTimeout(function () {
            frameWindow.focus();
            try {
              if (!frameWindow.document.execCommand('print', false, null)) {
                frameWindow.print();
              }
            } catch (e) {
              frameWindow.print();
            }
            frameWindow.close();
          }, 10);
        } catch (err) {
          console.log('err', err);
        }
      },
      isDOM: (typeof HTMLElement === 'object') ?
        function (obj) {
          return obj instanceof HTMLElement;
        } :
        function (obj) {
          return obj && typeof obj === 'object' && obj.nodeType === 1 && typeof obj.nodeName === 'string';
        }
    };
    const MyPlugin = {}
    MyPlugin.install = function (Vue, options) {
      // 4. 添加实例方法
      Vue.prototype.$print = Print
    }
    export default MyPlugin
    
    展开全文
  • 最近顾客需要把html打印,用window.print() 需要自己创建iframe 把打印内容放入到js创建的iframe 中,调用该iframe 的window.print()进行实现html打印。但是兼容性不怎么好毕竟自己写的哈哈。支持vue,cdn 引入方式...

    插件地址:Print.js - Javascript library for HTML elements, PDF and image files printing.

     最近顾客需要把html打印,用window.print() 需要自己创建iframe 把打印内容放入到js创建的iframe 中,调用该iframe 的window.print()进行实现html打印。但是兼容性不怎么好毕竟自己写的哈哈。

    支持vue,cdn 引入方式,有需要的小伙伴可以自己研究下。

    另外说下之间遇到的问题

    1.表格在打印的时候可能会换行,很不美观如下图

     解决:在不希望插入分页符的元素上加上css属性page-break-inside:avoid;

    2.如何隐藏页眉页脚?

    在iframe 内加入@page去把打印页面的margin 变成0 ,页就隐藏了页眉页脚,但是我不推荐,这可能会对你的样式造成改变看起来比较丑,其实用户在打印时在高级选项内是可以自行隐藏掉页眉页脚的。

    @page {
        size: auto; /* auto is the initial value */
        margin: 0mm; /* this affects the margin in the printer settings */
    }
    展开全文
  • 1.print.js // 打印类属性、方法定义 /* eslint-disable */ const Print = function (dom, options) { if (!(this instanceof Print)) return new Print(dom, options); this.options = this.extend({ 'noPrint'...
  • 前端使用print.js实现打印

    千次阅读 2022-05-16 13:10:29
    前端使用print.js实现打印
  • vue使用print.js打印插件

    千次阅读 2021-08-06 16:19:57
    任务:解决vue页面局部打印功能 print.js插件,可以打印 html、pdf、json数据 官网:https://printjs.crabbly.com/ ... import print from 'print-js' 3.在vue文件中新建一个打印div盒子 ,设一个 id 值(printB
  • 安装print-js npm install print-js --save main挂载 import Print from 'vue-printjs' Vue.use(Print) 使用 需要打印的id页面 this.$print(this.$refs.child, { type: "html", header: "打印标题", targetStyles: ...
  • Print.js--网页文件打印

    千次阅读 2022-01-10 10:56:23
    Print.js 有四种打印文档类型可用:’ pdf ‘,’ html ','图像’和json。 默认类型是’ pdf '。 它的基本用法是呼叫printJS()只需输入一个PDF文档网址:printJS('docs/PrintJS.pdf ')。 对于图像文件,想法是一样的,...
  • vue+print.js实现pdf打印预览效果,可实现图表打印效果 1、在utils中新建print.js文件 // 打印类属性、方法定义 /* eslint-disable */ const Print = function (dom, options) { if (!(this instanceof Print)) ...
  • 基于jquery.print.js插件的js打印demo,简单易用,使用详细教程请查看我的个人主页的博客《一款很好用的Jquery 打印插件——jQuery.print.js
  • 项目中有用到打印功能,网上就找了print.js,具体操作步骤如下(也可以参考以上两个链接地址): 1、通过 npm 安装: npm install print-js --save 2、将库导入到您的项目中: import printJS from ‘print-js’ 3、...
  • 使用print.js进行分页打印

    千次阅读 2022-04-22 10:01:23
    print.js官网 目的:实现大量数据的分页打印 探究过程:几种流行的打印插件, vue-print-nb vue-easy-print 都没有实现自动分页打印功能(网上讲解混乱,有的说可以自动分页,有的说不能,导致在这两个插件上耗费很长...
  • 1.npm 安装priint.js ...import * as Printjs from "print-js"; 3. <el-table id="printCons" :data="tableData" stripe style="width: 100%; margin-top: 30px" border v-loading="loading" >
  • 浏览器打印功能print.js

    千次阅读 2020-10-22 16:38:14
    print-js 浏览器打印j打印插件 打印预览
  • 原生js打印插件Print.js

    2021-01-04 14:07:55
    上面有代码 更新说明: 1. 新增了打印回调方法 onStart()和onEnd(); 2. 修复了有时打印空白的bug; Print.js 网页打印插件 ... 原生js,不依赖其它库 ... 支持input(radio/checkbox/text)、select、...引入Print.js
  • vue+elementui+print.js

    2021-01-28 11:28:23
    vue+elementui+print.js 首先去资源中下载print.js 在项目下的static中建立一个文件夹print-plugs 在mian.js中导入 import Print from '../static/plugins/print-plugs/print' // 打印 Vue.use(Print) ...
  • 相关链接:pringt.js github地址里面也有使用说明 主要记录以下使用时发现的问题: 1.样式问题 我使用的element组件,发现分栏布局 xs\md\lg没有效果。我想大概这种组件封装的样式使用都有点问题。从这思路去入手...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 298,136
精华内容 119,254
关键字:

Print.js