关于前端做word、pdf文件的预览和水印

最近项目需要，需要做文件预览和水印，后端最起来成本较大，要求前端做，下面分享下心得

关于预览

文件预览我用的是iframe，pdf文件的预览很简单的，直接将url赋予iframe的src上，并且给iframe和包裹iframe的容器一个宽高，即可预览。代码如下：

          <iframe
            v-if="materialLists[activeMaterial].type === 'pdf'"
            :src="materialLists[activeMaterial].url"
            frameborder="0"
            style="width: 100%; height: 100%"
          ></iframe>

其次，word文件的预览，直接用iframe预览并不能成功，这里，需要引入微软提供的方法，在 "view.officeapps.live.com/op/view.asp…" 后边添加需要预览的内容，注意：链接包含中文需要进行URL编码，并且文档必须可在Internet上公开访问，代码如下

<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>

关于水印

前端做水印，用的是watermark.js插件
详细配置见：blog.csdn.net/Aria_Miazzy…

需要注意的是：watermark用完要及时销毁，还有就是有的时候预览是做在弹框里的，这个时候除了及时销毁以外，还要只能给页面指定dom初始化waterload，并且确保初始化之前，可以拿到这个dom，不然watermark这个插件找不到初始化对象，就会默认渲染body整个页面，以防万一可以加个异步线程操作

setTimeout(() => {
  watermark.load({ watermark_parent_node: 'pdfOrWord', watermark_txt: name, watermark_rows: 1, watermark_height: 30, watermark_width: 200 })
})

watermark.remove()