Recently, the project needs to do file preview and watermarking, the most expensive back-end, front-end requirements to do, the following to share the experience

On the preview

  • File preview I use iframe, PDF file preview is very simple, directly assign the URL to the SRC of the IFrame, and give the iframe and the container containing the IFrame a width and height, you can preview. The code is as follows:
          <iframe
            v-if="materialLists[activeMaterial].type === 'pdf'"
            :src="materialLists[activeMaterial].url"
            frameborder="0"
            style="width: 100%; height: 100%"
          ></iframe>
Copy the code
  • Second, the word file preview, directly use the iframe preview is not successful, here, need to introduce Microsoft provides methods, in “view.officeapps.live.com/op/view.asp…” Add what you want to preview,

Note: URL encoding is required for the Chinese included in the link, and the document must be publicly accessible on the Internet, as shown below

<iframe
  v-if="materialLists[activeMaterial].type === 'word'"
  :src="`https://view.officeapps.live.com/op/view.aspx?src=${materialLists[activeMaterial].url}`"
  frameborder="0"
  style="width: 100%; height: 100%"
></iframe>
Copy the code

About watermark

Watermarking is used in front of the watermark. For details, see blog.csdn.net/Aria_Miazzy…

  • Note that: Waterload: Waterload: waterload: waterload: waterload: waterload: waterload: waterload: waterload: waterload: waterload: waterload: waterload: waterload: waterload: waterload: waterload: waterload: waterload: waterload: waterload: waterload: waterload: waterload: waterload: waterload: waterload: waterload: waterload: waterload: waterload: waterload: waterload The entire body page is rendered by default, just in case an asynchronous thread can be added
setTimeout(() => {
  watermark.load({ watermark_parent_node: 'pdfOrWord', watermark_txt: name, watermark_rows: 1, watermark_height: 30, watermark_width: 200 })
})
Copy the code
watermark.remove()
Copy the code