精华内容
下载资源
问答
  • 有如下需求: 要打印页面之中的某个表格,而且还要自动横打(所以用scriptX等控件,因为window.print是竖打)? 解决办法:将这部分表格(或者div等)提取出来,专门放到一个新的窗口中去,然后根据这些内容自动生成...

    有如下需求: 要打印页面之中的某个表格,而且还要自动横打(所以用scriptX等控件,因为window.print是竖打)?

    解决办法:将这部分表格(或者div等)提取出来,专门放到一个新的窗口中去,然后根据这些内容自动生成一个包含打印控件iFrame,  再调用控件的打印方法打印该Ifrme;

    ____________________________________________________________

    动态生成iframe的代码:

        var ifr = document.createElement("iframe");
        document.body.appendChild(ifr);
        var ifrdoc = ifr.contentWindow.document;
        ifrdoc.open();
        ifrdoc.write("<BODY>");
        ifrdoc.write("<object id='factory' style='display:none' classid='clsid:1663ed61-23eb-11d2-b92f-008048fdd814' ></object>  ");
        ifrdoc.write("</BODY>");
        ifrdoc.close() ;

     

    _____________________________________________________

    实现打印的函数(可直接拷贝调用):

    function PrintPart(controlId, isPortrait) //isPortrait =false 代表横打

    {

      //以下先生成一个Docment Fragment, 不是必须

        var sdiv = document.getElementById(controlId);
     
       var dc = document.createDocumentFragment();
        var dcBd = dc.createElement("BODY")
        for(var i=0;i<=sdiv.childNodes.length-1;i++)
        {
            dcBd.appendChild(sdiv.childNodes[i]);
        }
       
        dc.appendChild(dcBd);

      //根据传入的内容生成一个iFrame并打印

        var ifr = document.createElement("iframe");
        document.body.appendChild(ifr);

        ifr.style.pixelWidth = 1;
        ifr.style.pixelHeight = 1;


        var ifrdoc = ifr.contentWindow.document
        ifrdoc.open();
        ifrdoc.write("<BODY>");
        ifrdoc.write("<object id='factory' style='display:none' classid='clsid:1663ed61-23eb-11d2-b92f-008048fdd814' ></object>  ");
        ifrdoc.write(dc.body.innerHTML); //如果上面没有生成DocumentFragment,则用sdiv 对象的outerHtml属性
        ifrdoc.write("</BODY>");
        ifrdoc.close() ;
     

        //以下调用iframe中创建的打印控件实现打印
        var fc = ifrdoc.getElementById("factory");
        fc.printing.portrait = isPortrait; //是否横向打印
        fc.printing.Print();    
       
        document.body.removeChild(ifr); 

    }

    ______________________________________________________

     将以上代码稍加修改,就可以实现除打印之外的其它功能。主要的方法是document.write方法,动态生成新窗口,也类似:

            var ow = window.open("", "newwin", "height=1, width=1");//top=10000,left=10000");
            ow.document.write("<BODY>")
            ow.document.write("<object id='factory' style='display:none' classid='clsid:1663ed61-23eb-11d2-b92f-008048fdd814' ></object>  ")
            ow.document.write(dc.body.innerHTML);
            ow.document.write("</BODY>");
            ow.document.close() ;

    展开全文
  • 而一般情况下,打印时选择的打印机是默认打印机,打印页面范围是所有页面,如果要选择其他打印机或打印部分页面,需要对代码进行一定的设置。通过在百度和各大网站上查找资料,终于在MSDN上找到了一个解决方案,我把...

    最近在逛国外各大编程社区论坛的时候,发现很多人都在问一个关于PDF文件打印的问题:打印时如何选择非默认打印机并设置打印页面的范围。而一般情况下,打印时选择的打印机是默认打印机,打印页面范围是所有页面,如果要选择其他打印机或打印部分页面,需要对代码进行一定的设置。我在这里分享一个解决方案,让其他有同样需求的朋友少走点冤枉路。

    在这个解决方案中我使用了一个免费的PDF控件,感兴趣的朋友可以在Codeplex官网:https://freepdf.codeplex.com上下载。

    下面是该解决方案的详细代码分步解析:

    第一步:添加项目引用。

    安装控件后,创建一个新的项目,找到控件的安装目录,在项目的“解决方案”窗口右击->添加引用,选择和项目.NET Framework版本对应的dll文件进行添加;
    如下图:
    这里写图片描述

    第二步:使用命名空间。

    在该方案中,我使用的命名空间如下:

    using Spire.Pdf;
    using System.Windows.Forms;
    using System.Drawing.Printing;

    第三步:创建一个新的PDF文档,并加载待打印的PDF文件。

    PdfDocument doc = new PdfDocument();
    doc.LoadFromFile("sample.pdf");

    如果需要使用默认打印机打印所有页面,请看第四步。如果需要使用其他打印机并设置打印页面范围,请看第五步。

    第四步:使用默认打印机打印所有页面。

    doc.PrintDocument.Print();

    第五步:选择打印机和设置打印页面范围。

    PrintDialog dialogPrint = new PrintDialog();
    dialogPrint.AllowPrintToFile = true;
    dialogPrint.AllowSomePages = true;
    dialogPrint.PrinterSettings.MinimumPage = 1;
    dialogPrint.PrinterSettings.MaximumPage = doc.Pages.Count;
    dialogPrint.PrinterSettings.FromPage = 1;
    dialogPrint.PrinterSettings.ToPage = doc.Pages.Count;
    
    if (dialogPrint.ShowDialog() == DialogResult.OK)
        {
            //设置打印的起始页码
            doc.PrintFromPage = dialogPrint.PrinterSettings.FromPage;
            //设置打印的终止页码
            doc.PrintToPage = dialogPrint.PrinterSettings.ToPage;
            //选择打印机
            doc.PrinterName = dialogPrint.PrinterSettings.PrinterName;
    
            PrintDocument printDoc = doc.PrintDocument;
            dialogPrint.Document = printDoc;
            printDoc.Print();
        }

    运行项目,输出的效果图如下(打印机和打印页面范围可以自己选择):

    这里写图片描述

    全部代码如下:

    using Spire.Pdf;
    using System.Windows.Forms;
    using System.Drawing.Printing;
    
    namespace PrintPDF
    {
        class Program
        {
            static void Main(string[] args)
            {
                PdfDocument doc = new PdfDocument();
                doc.LoadFromFile("sample.pdf");
    
                //Use the default printer to print all the pages
                //doc.PrintDocument.Print();
    
                //Set the printer and select the pages you want to print
    
                PrintDialog dialogPrint = new PrintDialog();
                dialogPrint.AllowPrintToFile = true;
                dialogPrint.AllowSomePages = true;
                dialogPrint.PrinterSettings.MinimumPage = 1;
                dialogPrint.PrinterSettings.MaximumPage = doc.Pages.Count;
                dialogPrint.PrinterSettings.FromPage = 1;
                dialogPrint.PrinterSettings.ToPage = doc.Pages.Count;
    
                if (dialogPrint.ShowDialog() == DialogResult.OK)
                {
                    doc.PrintFromPage = dialogPrint.PrinterSettings.FromPage;
                    doc.PrintToPage = dialogPrint.PrinterSettings.ToPage;
                    doc.PrinterName = dialogPrint.PrinterSettings.PrinterName;
    
                    PrintDocument printDoc = doc.PrintDocument;
                    dialogPrint.Document = printDoc;
                    printDoc.Print();
                }
            }
        }
    }
    展开全文
  • vue项目中-打印页面部分区域的内容

    万次阅读 热门讨论 2017-11-17 09:49:53
    在项目的开发中遇到了点击打印,需要打印页面部分的表格,实现方式如下 首先将需要打印的内容包裹起来:例如 当点击打印的时候,执行下面的方法: // 打印 printContent(e){ let subOutputRankPrint =...

    在项目的开发中遇到了点击打印,需要打印页面中部分的表格,实现方式如下

    首先将需要打印的内容包裹起来:例如

     <div id="subOutputRank-print">
        <single-table :columns="columns" :tableData="tableData"></single-table>
    </div>

    当点击打印的时候,执行下面的方法:

     // 打印
                printContent(e){
                    let subOutputRankPrint = document.getElementById('subOutputRank-print');
                    console.log(subOutputRankPrint.innerHTML);
                    let newContent =subOutputRankPrint.innerHTML;
                    let oldContent = document.body.innerHTML;
                    document.body.innerHTML = newContent;
                    window.print();
                    window.location.reload();
                    document.body.innerHTML = oldContent;
                    return false;
                },

    效果如下:


    好了,这样就实现了打印页面的部分区域


    展开全文
  • VUE项目实现页面部分内容打印

    千次阅读 2020-04-30 17:59:31
    在vue项目开发过程中,有遇到打印的问题时,直接打印就会把系统的菜单栏和导航栏面包屑全部都打印出来,所以要想只打印页面部分我总结了两种办法: 第一种方法: 一般情况我都是通过window.open()直接打开一个需要...

    在vue项目开发过程中,有遇到打印的问题时,直接打印就会把系统的菜单栏和导航栏面包屑全部都打印出来,所以要想只打印页面部分我总结了两种办法:
    第一种方法:
    一般情况我都是通过window.open()直接打开一个需要打印的页面路径,这样就会在浏览器上新增一个标签,这个浏览器标签里就是单纯的需要打印的页面,没有菜单栏和导航栏面包屑等不需要打印的东西,然后在页面里直接window.print()来调取浏览器的打印窗口就ok了,这种方法需要注意的地方是,要把需要打印的菜单的路径在routers.js路由菜单里再配置一遍。
    代码如下:

    {
            path: '/print-aaa',
            name: 'print-aaa',
            meta: {
                title: '打印-aaa',
                hideInMenu: true
            },
            component: () =>
                import ('@/view/aaa')
        },
    

    这样打印时直接

    window.open(`/print-aaa`)
    

    就可以实现新打开浏览器页签打印。

    第二种方法:
    不打开浏览器页签直接在当前页签下实现打印页面的一部分
    首先封装一个打印的公共方法,并定义全局实例:$print

    // 注意事项 需使用ref获取dom节点,若直接通过id或class获取则webpack打包部署后打印内容为空 指定不打印区域 方法一. 添加no-print样式类
    //
    // <div class="no-print">不要打印我</div>
    // 方法二. 自定义类名
    //
    // <div class="do-not-print-me-xxx">不要打印我</div>
    // this.$print(this.$refs.print,{'no-print':'.do-not-print-me-xxx'}) // 使用
    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
    

    这样使用时只要把需要打印的div设置ref名就可以直接用以下代码

    this.$print(this.$refs.需要打印的div的ref名)
    

    就可以实现打印页面的部分内容了。

    展开全文
  • 实现页面部分打印 需要指出的是这种方法提供一个打印前和打印后的事件onbeforeprint、onafterprint。可以在打印前的时候重新编辑一些格式,专门送去打印打印后又处理回来。 function window.onbeforeprint() { //...
  • window.print()打印带有样式的部分页面

    千次阅读 2020-06-20 14:53:00
    window.print()打印带有样式的部分页面 最近做个新任务,第一次接触了解前端打印页面这一块,如果单纯打印页面内容是很简单的,直接在某个页面调用window.print()就OK了,如果需要打印页面某部分,如果不了解打印的...
  • 今天讲一下打印的问题首先写一个通用的打印方法function printOK(pageLocation){ if(confirm("你确定打印吗?")) { //指定打印的位置,pageLocation,10是可以的手动设置的 if(pageLocation !=0) { var ...
  • 1)谷歌可用:(IE8,弹出打印窗体后,但原窗体内容,会变成空白) function applyPrint(){ if(!confirm('确定要打印吗?')){ return; } var headstr ="<html><head><title>招聘...
  • javascript打印-打印页面设置-打印预览代码 function printsetup(){ // 打印页面设置 wb.execwb(8,1); } function printpreview(){ // 打印页面预览 wb.execwb(7,1); } function printit()
  • 原地址: ...Word“打印”对话框的“页面范围”部分可让您仅打印所需的页面。例如,如果您需要打印100页文档的第1,10和100页,则在
  • 2.页面显示需要打印的内容; 3.再调用浏览器的打印功能就可以了; 将下面代码单独保存为html文件,即可预览效果。  function preview() {  bdhtml = window.document.body.innerHTML;  sprnstr...
  • window.print()打印页面部分内容

    千次阅读 2012-11-17 22:11:33
    window.print() 实际上,是浏览器打印功能菜单的一种程序调用。与点击打印功能菜单一样,不能精确分页,不能设置纸型,套打的问题更加无从谈起,只不过,可以让用户不用去点菜单,直接点击网页中的一个按钮,或一个...
  • javascript打印html页面

    千次阅读 2018-05-16 17:57:41
    一、HTML部分设置1.在html中设置标记&lt;div id="...&gt; 这里是要打印的html内容 &... 这里是要打印的html内容 ...二、JS打印页面部分/* * 打印页面 */ function printHTML(_this){ // ...
  • 如下方法: function printProof(){ var printData = document.getElementById... // 只打印 forPrint 这个div中的内容。 window.document.body.innerHTML = printData; //把 html 里的数据 复制给 body 的 html 数
  • 页面打印方法

    千次阅读 2017-07-07 15:55:07
    1、浏览器内部打印,就是打印整个页面,除了加class=”noprint”的内容 2、JS局部打印内容1,就是打印包含在startprint1和endprint1之间的内容,除了加class=”noprint”的内容 3、JS局部打印内容2,就是打印...
  • 从网上学到的一些用法: window.print()&nbsp; 实际上,是浏览器打印功能菜单的一种程序调用,设置打印参数,...可以在打印前的时候重新编辑一些格式,专门送去打印打印后又处理回来。 1、 function win...
  • Firefox 浏览器打印页面时不打印页眉和页脚 用浏览器打开需要打印页面 点击右上角的 打开菜单 按钮 点击 打印 在弹出的打印预览界面中点击上方的 页面设置 点击弹出窗口的 页...
  • js调打印机打印web页面

    千次阅读 2018-06-22 17:00:28
    js调打印机打印web页面1.全局打印,打印整个页面function toPrint(){ window.print(); }2.局部打印,把不想打印部分隐藏起来,可以用 onbeforeprint(打印之前)、onafterprint(打印之后)事件。当然,也可以自己...
  • web页面单页打印以及批量打印

    万次阅读 2018-01-31 10:40:28
    打印事件:window.print()1.单页打印(布局打印):function printCnt(){ //1.... var body = window.document.body....要打印部分(#print里面的内容就是要打印的内容) window.document.body.innerHTML =documen...
  • JS打印当前页面打印局部div

    万次阅读 2016-10-19 16:40:14
    /** * Created by Administrator on ... * 打印当前页面 */ function printpage() { window.print(); }/** * 打印局部 * 此js函数用于解决打印指定div的问题 */ function printdiv(printpage) { var headhtml =
  • js实现页面打印

    千次阅读 2018-09-20 18:24:18
    js有多种方式实现打印 window.print() window.print();会弹出打印对话框,打印的是window.document.body.innerHTML中的内容,但是iframe中无法使用需要用 document.execCommand(“print”) &lt;body&gt; &...
  • 前端打印HTML页面

    千次阅读 2018-11-15 20:05:02
    如果直接调用window.print()的话,会将tiltle或者访问的路径打印出来,所以要替换(也可以打印特定内容,通过ID获取,然后拼接为特定的网页内容) function toPrint(){ var go = confirm("是否需要打印?&...
  • js实现页面打印

    千次阅读 2017-09-20 14:43:54
    利用浏览器中自带的 window.print() 方法(1) 实现整个页面打印直接点击调用这...(2)实现局部页面打印时,首先要加开始打印位置以及打印结束位置的标注,我们只需截取两者中间的部分进行打印即可 <div class="row">
  • JSP页面打印

    千次阅读 2011-07-29 18:54:56
    打印网页内部分内容(自定义) 打印去掉/添加页眉页脚 使用外部控件/方法实现多功能打印 打印背景 以上为代码控制 设置“页面设置”实现打印参数设置(Window系统图文版) 一、普通打印(整页打) 这个...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 165,053
精华内容 66,021
关键字:

怎么打印部分页面