Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”

A, the vue – PDF

During project development, if we only need to show the PDF, then we can choose vue-PDF, which can be viewed in my previous article

However, the current requirement is to display the PDF with watermarks, which is a problem. Vue-pdf will mask the signature layer, so the watermark cannot be displayed.

Solution 1:

I saw someone bring this up on Issues. Address issues

The solution is to directly modify the source code of pdf.work.js by searching for annotationFlag.hidden globally:

// if (data.fieldType === 'Sig') {
// Comment this line
// _this2.setFlags(_util.AnnotationFlag.HIDDEN);
// }
Copy the code

Solution 2:

Since the solution could not solve my problem, I looked for a solution

Open the node_modules \ vue - PDF \ SRC \ pdfjsWrapper js the line commented out annotationLayerElt. Style. The visibility ='hidden'
Copy the code

Since neither solution worked as expected, I switched to a plugin.

Second, the pdfh5

Installation:

npm install pdfh5
Copy the code

Use:

<template>
  <div id="app">
	<div id="demo"></div>
  </div>
</template>
<script>
  import Pdfh5 from "pdfh5";
  export default {
    name: 'App'.data() {
	  return {
	    pdfh5: null
	  };
	},
	mounted() {
		/ / instantiate
	  this.pdfh5 = new Pdfh5("#demo", {
		pdfurl: ".. /.. /static/test.pdf"
	  });
	  // Listen for the completion event
	  this.pdfh5.on("complete".function (status, msg, time) {
		console.log("State:" + status + ", message:" + msg + ", time:" + time + "Milliseconds, total pages:" + this.totalNum)
	  })
	}
  }
</script>

<style>
	@import "pdfh5/css/pdfh5.css";
</style>
Copy the code

Introduction:

If the CSS reference fails, do as follows.

/ / introduce pdfh5
import Pdfh5 from "pdfh5";
import "pdfh5/css/pdfh5.css";
Copy the code

Effect:

This will show the specific watermark, watermark.jpg

3. Electronic seal does not display (intrusion deletion)