Angular print page specified function

This time I will bring you the angular printing page designation function and what are the precautions. The following is a practical case, let’s take a look.

Preface

This article mainly introduces the relevant content about angular's implementation of the partial function of page printing. It is shared for your reference. There is not much to say below. Having said that, let’s take a look at the detailed introduction.

Scenario

When the page is displayed, it is paging reality. The current page only has 10 pieces of data, but printing needs to print the complete 100 pieces. data.

And the current page contains titles, menus and other elements other than tables.

All api requests the day after tomorrow need to bring token information

The front page jumps to the print page and then jumps back

1. Pass the data through the cache,

2. The route jumps to the print page,

3. The page gets the cached data,

4. Call the browser print method,

5. Step back after the operation is completed

Call the print page

 this.cach.setBylocal({key: key, value: data}); // 写入缓存
 this.router.navigate([url, key]); // 路由跳转，缓存key值传递过去

Print page

 ngAfterViewInit() {
 const $qus = this.route.params.subscribe(q => {
  const key = q.key;
  if (key) {
  this._data = this.cach.getBylocal(key) ;
  this.cach.removeBylocal(key);
  setTimeout(() => {
   window.print();
   history.go(-1);
  }, '20');
  }
 });
 }

Automatically handle issues such as paging display in the printed page. The test page of A4 paper is suitable for pages 840px-1225px

The page title and date will be automatically added to the printed file, and the page address will be automatically added below. I don’t know how to remove it

Generate PDF page in the background to display the print and download function

1. Generate PDF files in the background and return the binary stream.

2. If token information is not required and the get request is supported, the address can be opened directly in the browser. Or use a tag to achieve downloading and page display. And realize the printing function.

3. If token verification is required, use the blob type to receive data and create a local address for browser access. The subsequent operations are as in step 2.

 private down(url: string, body?: any) {
 return this.http.post(url, body || null, {
  responseType: 'blob'
 })
 }
 private downLoad(url: string, type: string, body?: any, fileName?: string) {
 return this.down(url, body).map(r => {
  const blob = new Blob([r], {type: type});
  const objectUrl = URL.createObjectURL(blob);
  const a = document.createElement('a');
  document.body.appendChild(a);
  a.setAttribute('style', 'display:none');
  a.setAttribute('href', objectUrl);
  if (fileName) {
  a.setAttribute('download', fileName);
  } else {
  a.setAttribute('target', '_blank');
  }
  a.click();
  URL.revokeObjectURL(objectUrl);
  return true;
 });
 }
 /**
 * 下载pdf， 如果不传入文件名会再浏览器中打开 实现打印功能
 * 传入文件名会直接下载
 * @param {string} url
 * @param body
 * @param {string} fileName
 * @returns {Observable}
 */
 downLoadPdf(url: string, body?: any, fileName?: string) {
 return this.downLoad(url, 'application/pdf', body, fileName);
 }

Call printing in the iframe page

This method can be used in combination with the first two methods. Put the first two pages in iframe pages.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of Vue Mixin function use case

Use Element-UI Table to implement drag and drop function

The above is the detailed content of Angular print page specified function. For more information, please follow other related articles on the PHP Chinese website!