Hướng dẫn custom window print javascript - cửa sổ tùy chỉnh in javascript

Question

0

Mới! Lưu câu hỏi hoặc câu trả lời và sắp xếp nội dung yêu thích của bạn. Tìm hiểu thêm.
Learn more.

Tôi có người trợ giúp mua sắm tiện lợi này tại http://www.spacerock.com/shoppingplanner.php - Nhấp vào một bữa ăn và các thành phần xuất hiện trong DIV DIV. Tôi có nút in cửa sổ ở trên cùng nhưng nó không in div đó. Làm thế nào tôi có thể chỉ định nó để in div đó? Mã cho nút là tôi biết nó có lẽ rất đơn giản; Tôi là một người jquery và cần phải học JS thuần túy. Cảm ơn trước sự giúp đỡ và giáo dục của bạn.

Khi được hỏi ngày 5 tháng 5 năm 2015 lúc 15:52May 5, 2015 at 15:52

1

Sử dụng JS này: Để in cụ thể DIV với ID='content'
to print specific DIV with ID='content'

<input style="width:75px" type="button" name="printreport" id="printreport" value="Print List" onclick="printpage()">

function printpage()
    {
        var originalContents = document.body.innerHTML;
        var printReport = document.getElementById('content').innerHTML;
        document.body.innerHTML = printReport;
        window.print();
        document.body.innerHTML = originalContents;
    }

Hi vọng điêu nay co ich..

Đã trả lời ngày 7 tháng 5 năm 2015 lúc 15:22May 7, 2015 at 15:22

AbhinickzabhinickzAbhiNickz

1.0332 huy hiệu vàng17 Huy hiệu bạc29 Huy hiệu đồng2 gold badges17 silver badges29 bronze badges

1

W3Schools được tối ưu hóa cho việc học và đào tạo. Ví dụ có thể được đơn giản hóa để cải thiện việc đọc và học tập. Hướng dẫn, tài liệu tham khảo và ví dụ được xem xét liên tục để tránh lỗi, nhưng chúng tôi không thể đảm bảo tính chính xác đầy đủ của tất cả các nội dung. Trong khi sử dụng W3Schools, bạn đồng ý đã đọc và chấp nhận các điều khoản sử dụng, cookie và chính sách bảo mật của chúng tôi.

Bản quyền 1999-2022 bởi dữ liệu refsnes. Đã đăng ký Bản quyền. W3Schools được cung cấp bởi W3.CSS.
W3Schools is Powered by W3.CSS.

Nền tảng: JavaScript - EJ 2 | JavaScript - EJ 2 |

Kiểm soát: Sơ đồ Diagram

Văn bản được chèn vào lề trên cùng của mỗi trang của một tài liệu được gọi là tiêu đề và văn bản được chèn vào lề dưới cùng được gọi là chân trang trong khi bật tùy chọn tiêu đề và chân trang trong hộp thoại in Bạn có thể thấy tiêu đề và chân trang.

Sơ đồ cung cấp hỗ trợ để xuất nội dung của nó. Phương thức xuất khẩu phía máy khách giúp xuất sơ đồ.

Chúng tôi có thể tùy chỉnh tiêu đề và chân trang bằng cách thêm nội dung, thời gian, ngày tháng hoặc thậm chí vị trí của nội dung trong chân trang tiêu đề có thể được thay đổi. Tiêu đề và chân trang tùy chỉnh được tùy chỉnh trong cửa sổ in. Vui lòng tham khảo đoạn mã dưới đây cách in tùy chỉnh trong khi in sơ đồ bằng cách xuất.Please refer the below code snippet how to custom print while printing the diagram by exportDiagram.

Note:

Để sử dụng in và xuất, bạn cần tiêm PrintandExport vào sơ đồ.

  public toolbarEditorClick(args: ClickEventArgs): void {
    var image;
    var options: IExportOptions = {};
    options.mode = 'Data';
    options.region = 'Content';
    options.pageOrientation = 'Portrait';
    options.multiplePage = false;
    image = this.diagram.exportDiagram(options);
    this.printImages(image, options);
  }
 
private printImages(url: any, options: any) {
    let diagram: Diagram = this.diagram;
    var _this: any = diagram.printandExportModule;
    var attr = {
      id: diagram.element.id + '_printImage',
      src: url
    };
    options.margin = { top: 0, bottom: 0, right: 0, left: 0 };
    var img = this.createHtmlElement('img', attr);
    img.onload = function() {
      var div = _this.getMultipleImage(img, options);
      var printWind = window.open('');
      if (printWind != null) {
        if (div instanceof HTMLElement) {
          printWind.document.write(
            '<html><head><style> @page { size: auto;  margin: 0mm; } body{margin:0px;} div.parent {  position: relative; } div.upper {  position: absolute;left: 50%;top: 0%;}  div.absolute {  position: absolute;left: 50%;bottom: 0%;} </style>
// Header
<div class=upper>Syncfusion SfDiagram control</div>
// Footer
<div class=absolute >Page No: 1</div>
</head></html>'
          );
          printWind.document.write(
            '<BODY onload="setTimeout(function(){window.print();}, 100)">'
          );
          printWind.document.write('<center>' + div.innerHTML + '</center>');
          printWind.document.close();
        }
      }
    };
  }

Ngày mặc định và số trang có thể được ngăn chặn bằng cách thêm nội dung sau trong CSS hoặc theo kiểu

Liên kết mẫu: https://stackblitz.com/edit/angular-zequn7-3lykwd?file=app.component.ts: https://stackblitz.com/edit/angular-zequn7-3lykwd?file=app.component.ts

Bạn có thấy thông tin này hữu ích không?

programming javascript Print JavaScript Printer js Print area html