精华内容
下载资源
问答
  • 怎样选择打印内容或页面
    千次阅读
    2022-03-30 11:24:16

    window.print打印指定份数,指定内容

    点击打印跳转至新页面调用window.print

    将需打印页面的所有参数放置路由跳转参数中

    this.qrParams.printnum = this.printDetail.printnum// 填写的打印份数
    this.$router.push({
    	path: '/xxxx',//跳转路径
    	query: {
    		printDetail: this.printDetail, // 打印内容,需展示的数据
    		qrParams: this.qrParams, // 填写的打印份数
    	}
    )}
    

    跳转页面代码逻辑

    举个栗子,打印内容有图片和二维码(只有二维码生成,没有二维码实现)、文字
    需等待图片加载完成再调用打印页面/图片加载不出来也需调用打印页面
    等待二维码加载完成再调用打印页面

    //整个循环框,需打印多少份就循环多少次
    <div v-for="(item,i) in arr" :key="i" class="dialog-top">
    	<el-image :src="item.logourl" @load="imgLoad" @error="imgError" />	//图片
        <div>{{ item.couponname }}</div> //文字
        <div ref="qrCode"/></div> //二维码
    </div>
    export default {
      data() {
        return {
          printDetail: this.$route.query,//跳转页面参数
          printDetail: {},
          arr: [],//循环内容
          index:0,//图片加载张数
          timeout:null//定时器
        }
      },
      watch: {
        // 监听图片是否加载完成
        index(newValue) {
          if (newValue == this.printDetail.printnum ) {
            this.$loading({ text: 'loading' }).close()//加载完成关闭loading加载页面
            this.$nextTick(() => {
              this.print()
            })
          }
        },
      },
      mounted() {
        this.$loading({ text: 'loading' }) //未加载完成先显示loading加载页面
        for (let i = 0; i < Number(this.printDetail.printnum); i++) {
          this.arr.push(this.printDetail)
        }
        window.onafterprint = () => { //打印完成跳回原页面
          this.$router.replace('/xxxxxx')
        }
      },
      destroyed() {
        clearTimeout(this.timeout)
      },
      methods: {
        // 定时器等待二维码加载完成再调用打印机
        print() {
          clearTimeout(this.timeout)
          this.timeout = setTimeout(() => {
            window.print()
          }, 0)
        },
        // 图片加载事件
        imgLoad() {
          this.index++
        },
        // 图片加载失败回调
        imgError() {
          this.index = this.printDetail.printnum
        }
    }
    
    更多相关内容
  • 1、程序说明1) 此程序可以实现选择页面中的区域进行打印,以iframe方式进行打印;2) 与原生态的print() 区别在于,取消打印页面后可以完整保留当前访问页面内容。2、代码部分 1) JS 函数: 代码如下:function do_...
  • 由于项目的需要在一个页面选择打印内容。 把自己要打印的东西用一个DIV层抱起来。例如: 代码如下: <!– 信访事项转办告知单Start –> ”itemVrbjForm” xss=removed> <div xss=removed> (告知单编号:${...
  • javascript如何打印页面

    千次阅读 2021-06-11 07:23:30
    方式一:window.print()整体打印打印现在就轻松实现了页面打印,但是这种方式会将整个页面打印,如果想要实现指定区域的打印需要通过下面的设置局部打印首先,在html中,通过star和end来标记打印区域这块...

    我们在网页开发过程中经常会有打印页面的需求,通过JS来实现的方法有很多,下面我们看一下JavaScript中通过window.print()方法与jqprint()插件打印页面的方法。

    1b694225965abe118abecf854333063f.png

    方式一:window.print()

    整体打印打印

    现在就轻松实现了页面的打印,但是这种方式会将整个页面打印,如果想要实现指定区域的打印需要通过下面的设置

    局部打印

    首先,在html中,通过star和end来标记打印区域

    这块内容不需要打印

    这里是需要打印的内容

    .....

    这块内容不需要打印

    然后,在点击事件中添加如下代码function doPrint() {

    bdhtml=window.document.body.innerHTML;

    sprnstr="";

    eprnstr="";

    prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17);

    prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));

    window.document.body.innerHTML=prnhtml;

    window.print();

    }

    过滤打印区域的内容

    例如

    预览

    打印

    这里是需要打印的内容

    .....

    上面的预览和打印按钮不希望打印,如果要过滤的话可以做下面的样式设置

    @media print {

    .noprint{

    display: none;

    }

    }

    或:

    .noprint{

    display: none;

    }

    分页打印

    使用 window.print() 打印时,如果内容超出会自动分页。但是我们如果需要自定义分页范围,如碰到表格分页打印,可以通过进行如下设置:

    方式二、jqprint()

    jqprint是一个基于jQuery编写的页面打印的一个小插件,但是不得不承认这个插件确实很厉害,最近的项目中帮了我的大忙,在Web打印的方面,前端的打印基本是靠window.print()的方式进行打印的,而这个插件在其基础上进行了进一步的封装,可以轻松实现打印网页上的某个区域,这是个亮点。

    引入

    js

    function a(){

    $("#ddd").jqprint();

    }

    html

    testtesttesttesttest

    设置模板打印$("#printContainer").jqprint({

    debug: false,

    //如果是true则可以显示iframe查看效果(iframe默认高和宽都很小,可以再源码中调大),默认是false

    importCSS: true,

    //true表示引进原来的页面的css,默认是true。如果是true,先会找$("link[media=print],"若没有会去找$("link")中的css文件)

    printContainer: true,

    //表示如果原来选择的对象必须被纳入打印(注意:设置为false可能会打破你的CSS规则)。

    operaSupport: true

    //表示如果插件也必须支持歌opera浏览器,在这种情况下,它提供了建立一个临时的打印选项卡。默认是true

    });

    另外还可以使用html 标签引入Webbrowser控件(只兼容IE)或者调用windows底层打印,报安全警告,不建议使用(不支持局部打印)

    展开全文
  • 大家都知道我们不仅可以打印文档表格等,还可以对网页进行打印,这样看到有用的网页信息我们就不用复制粘贴...2、把鼠标放在该页面任意位置,单击鼠标右键,在出来的选项中选择打印,如图所示。3、在打印页面右侧的...

    大家都知道我们不仅可以打印文档表格等,还可以对网页进行打印,这样看到有用的网页信息我们就不用复制粘贴到文档中再进行打印了,不过有时候网页太长了,很多用户不知道要如何全部打印,为了帮助到大家,这就教大家怎样打印整个网页内容吧,希望可以帮助到大家。

    具体步骤如下:

    1、首先,我们打开想要打印的网页,如图所示。

    2cf51fb44a6bb00a64f163e3db5e0fe2.png

    2、把鼠标放在该页面任意位置,单击鼠标右键,在出来的选项中选择打印,如图所示。

    5e8ad3273023cda54ad1b0cbae2ade06.png

    3、在打印页面右侧的预览中查看我们想要打印的内容是否完整,滑动鼠标看看共有几页,每一页有哪些信息。(我要打印的网页打印预览有四页,但是只有前两页有内容,后边两页是广告和大片空白,就没必要打印了)

    ff76fc9dfccb1ad396d016429772083c.png

    4、我们就在页码设置那里写1-2,然后点击上方的【打印】,如图所示。

    f586d7cd72a0fe9b2bf8dad118d56e19.png

    5、有些网页并不会出现预览页面,我们看不到需要打印的内容是否完整,整个网页有几页等。没关系,我们复制网址,换个浏览器打开(一般用360浏览器就可以)。

    6、同样单击右键,在出来的选项中选择【打印预览】。在出来的预览中如果发现打印的信息不全,可以通过调整页面比例,让信息全部显示出来。

    0dcd6353ef3e794f9cebb827a49c9831.png

    3346cb826d8a406291254b9f48057ddd.png

    上述就是网页太长如何全部打印的详细内容,只要按照上面的方法就可以将整个网页打印出来了,大家可以试试看吧。

    我要分享到:

    展开全文
  • 最近做到了web页面课程表打印时,上网找了一些资料,最后使用了下面的方法实现了我需要的功能。将需要打印的课程表的table放入div标签中,然后指定出需要打印的区域,最后调用window.print打印指定内容。 示例代码...
  • ‍‍有很多win7 32位系统的用户反馈,在使用浏览器的网页打印功能时,发现打印出来的网页显示不全,内容超出了纸张,遇到win7打印网页显示不全怎么办呢?出现打印网页显示不全很有可能是网页打印页面设置出了问题,...

    ‍‍

    有很多win7 32位系统的用户反馈,在使用浏览器的网页打印功能时,发现打印出来的网页显示不全,内容超出了纸张,遇到win7打印网页显示不全怎么办呢?出现打印网页显示不全很有可能是网页打印页面设置出了问题,下面由小编给大家介绍一下win7设置网页打印页面的方法。

    具体方法如下:

    1、以ie浏览器为例,打开浏览器后,点击导航上的打印机图标旁边的下箭头,在弹出菜单中选择“页面设置”,如下图所示;

    a5c2579287e39aa97b9276ee6bd3c5da.png

    2、进入页面设置后,首先来设置纸张的大小,这个要根据实际打印纸张的大小设置,如下图所示;

    7f8c4db4d8d74238e559e73b19ff04e4.png

    3、接着设置页面打印的方向,根据需要,打印页面选择纵向的还是横向的,如下图所示;

    7b456c492cad0817f3ae0b65f8efdb71.png

    4、然后设置页面的页眉,根据需要设置,也可以选择空白,如下图所示;

    1538af38a96a3e035a1e3df9287138e9.png

    5、页面的页脚也是如此,根据自己的需要来设置,也可以设置为空白,如下图所示;

    2819daa54bdcf7602d667fae01b0b776.png

    6、点击更改字体,在此可以设置打印出来的文字的字体、颜色和大小进行设置,设置完后点击确定;

    30cef57fb63b350ac11244c07e1f26fe.png

    7、最后来设置下页面的页边距了,如下图所示。

    d971b8da27039dc8eb0ffe4c35ea3453.png

    按照上面的方法设置好以后在打印之前可以点击打印预览看看效果,关于win7设置网页打印页面的方法小编就跟大家介绍到这里了。

    ‍‍

    展开全文
  • 工作表制作完成之后,很多时候还需要将工作表打印出来,在打印工作表之前一般需要先进行页面设置,并通过打印预览查看效果是否满意,当设置的效果达到所需要的效果后再进行打印。一、页面设置通过页面设置可以使工作...
  • 针式打印机的页面打印设置小技巧解析针式打印机受进纸方式制约,进纸时,都要卷入一小段,固定纸张,这一...如果你的页面设置打印面积大于纸张实际可用长度,打印机就会自动将本页未打印完的内容排到下一页。有些是...
  • 打印网页(直接打印,不弹出打印预览打印机选择窗口).Noprint{display:none;}function printsetup(){// 打印页面设置wb.execwb(8,1);}function printpreview(){// 打印页面预览wb.execwb(7,1);}function printit(){...
  • react print自定义打印页面

    千次阅读 2022-01-15 10:02:36
    自定义打印页面 用法:导入第三方react-to-print npm install --save react-to-print npm 使用方法: import ReactToPrint from 'react-to-print'; const inputRef = useRef(); //获取 dom <Layout ...
  • word一页内容怎么分成两页打印

    千次阅读 2021-01-14 00:34:49
    word一页内容怎么分成两页打印我们经常在打印时会选择把两页A4打在一张A3上,但有的时候也会需要把一张A3的内容分成两页A4来打印,那么,如何进行操作呢?下面就来看看小编的做法吧。调整页面布局-页面设置-纸张,将...
  • ###js方法,获取dom,用windows方法来打印。 export function ... // 将旧的页面储存起来,当打印完成后返给给页面。 var oldContent = document.body.innerHTML // 赋值给body document.body.innerHTML = newC
  •  ////打印内容 为 自定义文本内容  //Font font = new Font("宋体", 12);  //Brush bru = Brushes.Blue;  //for (int i = 1; i ; i++)  //{  // e.Graphics.DrawString("中华人民共和国", font, bru, 0, i * ...
  • 打印当前页面指定元素中的内容

    千次阅读 2018-01-11 19:55:01
    打印当前页面指定元素中的内容 方式一:直接使用window.print(); (1)首先获得元素的html内容(这里建议如果有样式最好是用内联样式的方式)  var newstr = document.getElementById(myDiv).innerHTML;//...
  • 解决方法:1、以ie浏览器为例,打开浏览器后,点击导航上的打印机图标旁边的下箭头,在弹出菜单中选择页面设置”,如下图所示;2、进入页面设置后,首先来设置纸张的大小,这个要根据实际打印纸张的大小设置,如下...
  • 前端实现打印html页面

    2021-09-09 22:10:46
    前端打印页面内容确认打印布局打印排版去掉打印页眉页脚调用打印方法 确认打印布局 打印方法是打印body里面的数据,如果想打印部分数据,则需要将打印布局放在body里面,或者将不需要的布局隐藏。 将布局渲染到body...
  • 1) 此程序可以实现选择页面中的区域进行打印,以iframe方式进行打印; 2) 与原生态的print() 区别在于,取消打印页面后可以完整保留当前访问页面内容。 2、代码部分 1) JS 函数: function do_print(id_str)...
  • 在excel的打印中,由于内容太多了,导致太宽了,打印不全,这时候我们该怎么办呢,下面让学习啦小编为你带来excel 宽页面打印页面设置的方法。excel 宽页面打印页面设置步骤:1)使用页面设置—页面—页边距,将页...
  • 解决方法:首先选择所有要打印的文件,这里可以是word、excel、powerpoint文件然后在所选择的文件上,点击右键出来的菜单选择打印” ,就会一次性打印选择的所有文件。注意事项这种方式,可以一次性打印选择...
  • 如果觉得还是不合适,可选择适当的进入增大减小调整。2·通过更改文字大小来调整网页的整体视觉效果。点击“查看”菜单,从中选择“文字大小”,如果觉得网页太小,则可以将文字调大一些,例...
  •  在引入了jquery.jqprint.js之后,使用jqprint打印的是需要页面上写一个div标签包裹着需要打印的代码即可以把页面打印,如:&lt;div id="jqprintPrint"&gt; &lt;span&gt;需要打印内容&...
  • 选择您的打印机另存为PDF并打印。故障排除如果遇到以下未列出,请。代码块没有阴影确保在打印预览中启用了“背景图形”。 要进行检查,请在打印预览中单击“更多设置”,然后查找“背景图形”。缩进在代码块中很...
  • Vue实现将页面转成PDF并下载直接打印

    千次阅读 热门讨论 2021-11-10 10:57:45
    Vue实现将页面转成PDF并下载直接打印 步骤1:下载对应的库 npm i html2Canvas; npm i import JsPDF from 'jspdf' 步骤2:创建一个htmlToPdf.js的js文件, 然后在main.js中全局引用一下,编写如下代码: // ...
  • vue 打印页面部分区域

    2018-08-23 19:44:00
    1. vue项目打印页面部分区域 2. 原生js实现页面局部打印功能 3. vue项目中将table组件导出Excel表格以及打印页面内容 转载于:https://www.cnblogs.com/knuzy/p/9525844.html...
  • html打印页面的元素

    2019-09-25 16:16:30
    参考:https://www.cnblogs.com/chenyucong/p/5996544.html这篇文章已经讲得可以了。
  • window.print()整体打印1打印现在就轻松实现了页面打印,但是这种方式会将整个页面打印,如果想要实现指定区域的打印需要通过下面的设置局部打印首先,在html中,通过star和end来标记打印区域12345678这块内容不...
  • 有时候,我们需要去实现选择下拉选之后,页面上的内容根据选择的不同而进行不同的变化。我在这里需要实现的是下拉选选择的是公司,公司有客服人员,选择完公司之后,把客服人员的信息打印出来。页面内容代码如下:...
  • jsjquery实现页面打印

    千次阅读 2017-12-24 13:41:41
    最近一直在做页面打印相关的页面。这里分享下用css、jsjQuery实现页面打印的几种方法...
  • js网页打印的4种方式和相关内容

    千次阅读 2020-03-27 15:11:06
    js打印的4种方式和相关内容前言注释方式打印id选择打印 前言 在网页上打印通常都是Ctrl+p,例如百度首页打印预览: 我们有时候在项目中也会使用打印的功能,基本上都是打印网页上的一部分内容,比如某块区域的文章...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 146,534
精华内容 58,613
热门标签
关键字:

怎样选择打印内容或页面