1. 홈
  2. 질의 응답
  3. ExtJS 구성 요소를 인쇄하는 방법은 무엇입니까?

ExtJS 구성 요소를 인쇄하는 방법은 무엇입니까?

2011-05-09 6 views

답변

1

ExtJS에서 인쇄하는 것은 아주 쉽지 않습니다. 구성 요소를 인쇄 할 수있게 만드는 데 가장 좋은 자료는 Sencha architect's blog에서 찾을 수 있습니다. 이 게시물에서는 구성 요소에 대한 사용자 지정 인쇄 렌더러 및 인쇄에 대한 기타 세부 정보를 설정하는 방법에 대해 설명합니다. 그러나이 정보는 ExtJS 3.x 용입니다. ExtJS 4로 쉽게 인쇄 할 수 있습니다.

출처

2011-05-09 16:21:54 NT3RP

+0

저 Sencha 건축가 링크가 끊어졌습니다. – Blaise

+0

Wayback Machine의 블로그 게시물 복사본을 사용하기위한 링크가 업데이트되었습니다. – NT3RP

7 
    var targetElement = Ext.getCmp('PrintablePanelId'); 
        var myWindow = window.open('', '', 'width=200,height=100'); 
        myWindow.document.write('<html><head>'); 
        myWindow.document.write('<title>' + 'Title' + '</title>'); 
        myWindow.document.write('<link rel="Stylesheet" type="text/css" href="http://dev.sencha.com/deploy/ext-4.0.1/resources/css/ext-all.css" />'); 
        myWindow.document.write('<script type="text/javascript" src="http://dev.sencha.com/deploy/ext-4.0.1/bootstrap.js"></script>'); 
        myWindow.document.write('</head><body>'); 
        myWindow.document.write(targetElement.body.dom.innerHTML); 
        myWindow.document.write('</body></html>'); 
        myWindow.print();

extjs 인쇄 가능 구성 요소를 문서에 씁니다.

출처

2011-08-10 16:30:09

+0

+1이 방법을 사용하여 확장했습니다 (아래 답변 참조). – Peter

1

나는 Gopal Saini의 답변을 좋아합니다! 나는 그의 접근법을 취하고 내 애플 리케이션 중 하나를위한 함수를 작성했다. 여기에 코드가 있습니다. FF와 Safari에서 테스트되었습니다. IE에서 시도하지 않았지만 작동해야합니다.

print: function(el){ 

    var win = window.open('', '', 'width='+el.getWidth()+',height='+el.getHeight()); 
    if (win==null){ 
     alert("Pop-up is blocked!"); 
     return; 
    } 


    Ext.Ajax.request({ 

     url: window.location.href, 
     method: "GET", 
     scope: this, 
     success: function(response){ 

      var html = response.responseText; 
      var xmlDoc; 
      if (window.DOMParser){ 
       xmlDoc = new DOMParser().parseFromString(html,"text/xml"); 
      } 
      else{ 
       xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); 
       xmlDoc.async = false; 
       xmlDoc.loadXML(html); 
      } 


      win.document.write('<html><head>'); 
      win.document.write('<title>' + document.title + '</title>'); 


      var xml2string = function(node) { 
       if (typeof(XMLSerializer) !== 'undefined') { 
        var serializer = new XMLSerializer(); 
        return serializer.serializeToString(node); 
       } else if (node.xml) { 
        return node.xml; 
       } 
      } 


      var links = xmlDoc.getElementsByTagName("link"); 
      for (var i=0; i<links.length; i++){ 
       win.document.write(xml2string(links[i])); 
      } 

      win.document.write('</head><body>'); 
      win.document.write(el.dom.innerHTML); 
      win.document.write('</body></html>'); 
      win.print(); 
     }, 
     failure: function(response){ 
      win.close(); 
     } 
    }); 
}

출처

2012-07-10 17:11:44 Peter

0

또 다른 옵션은 구성 요소를 이미지 또는 pdf로 렌더링하는 것입니다. 팝업 창/인쇄 옵션이 좋지만 일부 브라우저는 올바르게 인쇄되지 않습니다. 그들은 배경 이미지, 특정 CSS 속성 등을 무시하는 경향이 있습니다. 구성 요소가 팝업 창에 나타나는 것과 똑같이 인쇄되도록하려면 html을 이미지로 변환하기 위해 서버 측 코드를 작성해야합니다.

print: function(el){ 

    var waitMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."}); 
    waitMask.show(); 


    //Parse current url to set up the host and path variables. These will be 
    //used to construct absolute urls to any stylesheets. 
    var currURL = window.location.href.toString(); 
    var arr = currURL.split("/"); 
    var len = 0; 
    for (var i=0; i<arr.length; i++){ 
     if (i<3) len+=(arr[i].length+1); 
    } 
    var host = currURL.substring(0, len); 
    if (host.substring(host.length-1)=="/") host = host.substring(0, host.length-1); 

    var path = window.location.pathname; 
    if (path.lastIndexOf("/")!=path.length-1){ 
     var filename = path.substring(path.lastIndexOf("/")+1); 
     if (filename.indexOf(".")!=-1){ 
      path = path.substring(0, path.lastIndexOf("/")+1); 
     } 
     else{ 
      path += "/"; 
     } 
    } 


    //Start constructing an html document that we will send to the server 
    var html = ('<html><head>'); 
    html += ('<title>' + document.title + '</title>'); 


    //Insert stylesheets found in the current page. Update href attributes 
    //to absolute URLs as needed. 
    var links = document.getElementsByTagName("link"); 
    for (var i=0; i<links.length; i++){ 
     var attr = links[i].attributes; 
     if (attr.getNamedItem("rel")!=null){ 

      var rel = attr.getNamedItem("rel").value; 
      var type = attr.getNamedItem("type").value; 
      var href = attr.getNamedItem("href").value; 

      if (href.toLowerCase().indexOf("http")!=0){ 
       if (href.toString().substring(0, 1)=="/"){ 
        href = host + href; 
       } 
       else{ 
        href = host + path + href; 
       } 
      } 

      html += ('<link type="' + type + '" rel="' + rel+ '" href="' + href + '"/>'); 
     } 
    } 

    html += ('</head><body id="print">'); 
    html += (el.dom.innerHTML); 
    html += ('</body></html>'); 


    //Execute AJAX request to convert the html into an image or pdf - 
    //something that will preserve styles, background images, etc. 
    //This, of course, requires some server-side code. In our case, 
    //our server is generating a png that we return to the client. 
    Ext.Ajax.request({ 

     url: "/WebServices/Print?action=submit", 
     method: "POST", 
     rawData: html, 
     scope: this, 
     success: function(response){ 
      var url = "/WebServices/Print?action=pickup&id="+response.responseText; 
      window.location.href = url; 
      waitMask.hide(); 
     }, 
     failure: function(response){ 
      win.close(); 
      waitMask.hide(); 
      var msg = (response.responseText.length>0 ? response.responseText : response.statusText); 
      alert(msg); 
     } 
    }); 
}

는 다시,이 이미지로 html로 변환하는 일부 서버 측의 마법이 필요합니다

는 다음과 같은 클라이언트 코드가 어떻게 표시되는지를 보여줍니다. 제 경우에는 "인쇄"서비스를 구현했습니다. 고객은 "제출"작업을 통해 작업 요청을 제출하고 "픽업"작업을 통해 출력 제품을 검색합니다.

html을 이미지로 변환하려면 Web Screen Capture이라는 무료 명령 줄 앱을 사용했습니다. Windows에서만 작동하며 위험에 얼마나 확장 성이 있는지를 잘 모릅니다.

출처

2012-07-11 19:07:32 Peter

2

true로 설정 모달 특성으로 Ext.window.Window에 인쇄 단지에만 원하는 구성 요소를 인쇄하는 표준 인쇄 대화 상자를 엽니 할 .

var view = this.getView(); 
var extWindow = Ext.create('Ext.window.Window', { modal: true }); 
extWindow.add(component); // move component from the original panel to the popup window 
extWindow.show(); 

window.print(); // prints only the content of a modal window 

// push events to the event queue to be fired on the print dialog close 
setTimeout(function() { 
    view.add(component); // add component back to the original panel 
    extWindow.close(); 
}, 0);

출처

2017-05-29 09:48:36 fen1ksss

+0

이것은 저에게 효과적입니다. 또한 구성 요소를 반복하는 함수를 만들었습니다. 패널 높이를 확인하고 페이지 나누기가 필요할 때 빈 div를 삽입했습니다. –

관련 문제

 관련 문제