Home > Web Front-end > JS Tutorial > Angular print page specified function

Angular print page specified function

php中世界最好的语言
Release: 2018-06-08 11:22:59
Original
2186 people have browsed it

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值传递过去
Copy after login

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');
  }
 });
 }
Copy after login

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<boolean>}
 */
 downLoadPdf(url: string, body?: any, fileName?: string) {
 return this.downLoad(url, 'application/pdf', body, fileName);
 }
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template