PDF的预览与下载

发表于2025-05-21|更新于2026-01-18|一个项目引发的突击学习

项目里需要针对PDF的文件进行预览与下载，而且在预览与下载时都需要添加水印，如果浏览器内核没有问题的话，我们时可以直接使用WaterMark 水印组件实现的，虽然是一种蒙版的感觉，但多少还是够用的，但问题就在，这个Vue组件是要看浏览器内核版本的，如果在国产的系统以及国产服务器上，（银河麒麟+360安全浏览器），根本没法用！只能从PDFjs上面下手了。

水印显示

Vue组件

当然，最初的方案很简单，js完全可以实现：

<template>
  <el-watermark :content="['这是水印', '第二行']">
    <div style="height: 500px">
      <!-- 你的页面内容 -->
    </div>
  </el-watermark>
</template>

找个响应式变量绑定上去，就完事了，但问题是！有些浏览器不支持！而且他本质上是一个页面上叠加了一层并不完全是一个

文章作者: Altria

文章链接: https://altria1122.github.io/2025/05/21/technology/202601/pdf%E9%A2%84%E8%A7%88%E4%B8%8E%E6%B0%B4%E5%8D%B0%E5%B5%8C%E5%85%A5%E7%9A%84%E6%96%B9%E6%B3%95/

版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 Altria的小屋！

相关推荐

用户登录与Redis

前言：本文基于若依前后端分离版本（Spring Boot 3.3.0 + Vue 3 + Activiti 8.1.0）进行改造，相关教程可以在网上找到。在撰写此博客期间，笔者刚刚开始接触 Java Web，本系列下的文章内容包含大量“个人初期”视角，注意鉴别。前端登录过程前端使用store管理用户user状态，其中有一个状态变更逻辑的方法（说人话：登录操作）：login，通过用户名、密码、验证码、uuid四个参数像后端发送账户信息进行登录操作，其中的uuid通过getCodeImg获取，返回值为：验证码图像与uuid。 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849@GetMapping("/captchaImage")public AjaxResult getCode(HttpServletResponse response) throws IOException{ AjaxResult ajax =...

数据库分离

前言：本文基于若依前后端分离版本（Spring Boot 3.3.0 + Vue 3 + Activiti 8.1.0）进行改造，相关教程可以在网上找到。在撰写此博客期间，笔者刚刚开始接触 Java Web，本系列下的文章内容包含大量“个人初期”视角，注意鉴别。为啥要配置多数据源？业务、流程、系统相关数据库进行分离，免得一次性全炸了，当然商业软件可能会更多的考量，比如数据备份、读写分离等等安全性的考虑，目前的想法出于业务分离的考量，再同样的系统上集成其他业务，就不需要重新搞用户、部门等数据表。怎么配？若依项目本身就集成了多数据源的配置，在alllication.yml中就有： 1234567891011121314151617181920spring: datasource: druid: # 主库数据源 master: url:...

前端总体概述

前言：本文基于若依前后端分离版本（Spring Boot 3.3.0 + Vue 3 + Activiti 8.1.0）进行改造，相关教程可以在网上找到。在撰写此博客期间，笔者刚刚开始接触 Java Web，本系列下的文章内容包含大量“个人初期”视角，注意鉴别。项目文件夹预览前端项目的基本目录结构我将参照若依，但是具体的演示截图，我将使用我自己的项目。一般情况下我们只需要看下图中的四个部分就可以，下文依次进行。依赖——package.json 此部分并无过多解释，重点集在依赖项的书写方式、版本对应关系，引擎打包工具等设定，基于ruoyi的二次开发的情况下，可以暂且不深入研究，直接套用即可。截取部分展示。 1234567891011121314151617181920212223"scripts": { "dev": "vite", "build:prod": "vite build", "build:stage":...

后端总体概述

前言：本文基于若依前后端分离版本（Spring Boot 3.3.0 + Vue 3 + Activiti 8.1.0）进行改造，相关教程可以在网上找到。在撰写此博客期间，笔者刚刚开始接触 Java Web，本系列下的文章内容包含大量“个人初期”视角，注意鉴别。前言在初次接触Java web开发时看着项目中一大堆文件夹，还是有些无从下手的，所以在写每个功能前还是需要了解一下后端整体的项目结构的。业务A == iams-业务A 后端项目打开会看到好多模块，每个模块在业务逻辑上是独立的，相互之间是可以被调用的（但是不能A调用B，B同时再调用A，会导致循环依赖）。比如若依的项目，在这个视频中介绍了课程类的添加方式，实现了对课程数据的增删查改，只不过它把后端的代码都放到了admin模块下面，其实我们也可以新增一个模块，将这个代码放进去，就像下图一样，每个模块负责各自的业务。如何形象化一个后端模块？——以用户管理为例其实不是很想用添加用户这个作为演示，他的服务、实体、数据库映射放在了system模块里面，但是控制层却放到了admin的web文件夹下，总体上不影响的 ...

数据库迁移：MySQL -> 人大金仓

前言：本文基于若依前后端分离版本（Spring Boot 3.3.0 + Vue 3 + Activiti 8.1.0）进行改造，相关教程可以在网上找到。在撰写此博客期间，笔者刚刚开始接触 Java Web，本系列下的文章内容包含大量“个人初期”视角，注意鉴别。人大金仓？ Kingbase是基于开源数据库PostgreSQL开发的国产数据库。所以在后续的开发中，将人大金仓视作PostgreSQL就可以解决大多数问题（这个想法对于海量数据库Vastbase是不是也是成立的？）安装人大金仓，一路下一步，全部安装，其中有一步骤是添加license，在下载页面也有授权文件的下载，选择开发版就好，安装好后就能看到三个软件工具：初步使用运行：数据库开发管理工具。界面跟Navicat、MySQL Workbench有些像：创建连接、创建数据库的过程还是相当相似的，不过多赘述，但是相比MySQL的数据库，多了模式这一层级。可以把它理解成一个命名空间，也就是说kingbase的数据库相对是一个更加大的集合。 mysql:...

若依集成单点登录

前言：本文基于若依前后端分离版本（Spring Boot 3.3.0 + Vue 3 + Activiti 8.1.0）进行改造，相关教程可以在网上找到。在撰写此博客期间，笔者刚刚开始接触 Java Web，本系列下的文章内容包含大量“个人初期”视角，注意鉴别。背景补充单点登录（Single Sign-On, SSO）是一种身份验证机制，允许用户通过一次登录访问多个相互信任的子系统。例如，用户登录企业内部门户后，可直接访问OA、CRM等系统而无需重复输入凭证。常见的SSO协议包括CAS、OAuth2、SAML等。本文实现的是一种简化的SSO逻辑，通过第三方系统颁发的Token直接完成若依系统的身份认证。 Spring Security...