两天有个客户需要把网页转为pdf，之前也没开发过类似的工具，就在百度搜索了一波，主要有下面三种

1. 在线转pdf
2. 使用浏览器打印功能转pdf
3. 使用本地软件工具转pdf

在线转pdf

在百度（我一般用必应）搜索“在线网页转pdf”就有很多可以做这个事的网站，免费的如

• PDF24Tools

各种pdf的操作都有，免费使用，速度一般。

官网地址https://tools.pdf24.org/zh

• doctron

开源免费项目，使用golang写的，提供在线转

官网地址http://doctron.lampnick.com/

还有挺多其他的，可以自己搜索，但是都不符合我的预期。

使用浏览器打印功能转pdf

1. 在浏览器右键，点击打印或者ctrl+p
2. 在弹出的打印对话框中找到目标打印机选择“另存为PDF”
3. 点击“保存”按钮即可下载pdf了

使用本地软件工具转pdf

Doctron，这是我今天要介绍的重头戏。

Doctron是基于Docker、无状态、简单、快速、高质量的文档转换服务。目前支持将html转为pdf、图片(使用chrome(Chromium)浏览器内核，保证转换质量)。支持PDF添加水印。

• 使用chrome内核保证高质量将HTML转为pdf/图片。
• 简易部署(提供docker镜像,Dockerfile以及k8s yaml配置文件)。支持丰富的转换参数。转为pdf和图片支持自定义大小。
• 无状态服务支持。

管他的，先把代码下载下来再说

git clone https://gitcode.net/mirrors/lampnick/doctron.git

运行

go build
./doctron --config conf/default.yaml

转pdf，访问http://127.0.0.1:8080/convert/html2pdf?u=doctron&p=lampnick&url=<url>，更换链接中的url为你需要转换的url即可。

然后就可以写程序去批量转换需要的网页了，但是我需要转换的网页有两个需求

1、网站需要会员登录，不然只能看得到一部分

2、需要把网站的头和尾去掉的

这就为难我了，不会go语言啊，硬着头皮搞了，肯定有个地方打开这个url的，就去代码慢慢找，慢慢调试，功夫不负有心人，终于找到调用的地方了。

第一步：添加网站用户登录cookie

第二步：去掉网站头尾

chromedp.Evaluate(`$('.header').css("display" , "none");
		$('.btn-group').css("display" , "none");
		$('.container .container:first').css("display" , "none");
		$('.breadcrumb').css("display" , "none");
		$('.footer').css("display" , "none")`, &ins.buf),

打开网页后执行js代码把头尾隐藏掉

第三步：程序化，批量自动生成pdf

public static void createPDF(String folder , String cl ,  String pdfFile, String urlhref) {
        try {
            String fileName = pdfFile.replace("/", ":");
            String filePath = folder + fileName;
            File srcFile = new File(filePath);
            File newFolder = new File("/Volumes/disk2/myproject" + File.separator + cl);
            File destFile = new File(newFolder, fileName);
            if(destFile.exists()){
                return;
            }
            if(srcFile.exists()){
                //移动到对应目录
                if(!newFolder.exists()){
                    newFolder.mkdirs();
                }
                FileUtils.moveFile(srcFile , destFile);
                return;
            }
            if(!newFolder.exists()){
                newFolder.mkdirs();
            }
            String url = "http://127.0.0.1:8888/convert/html2pdf?u=doctron&p=lampnick&url="+urlhref;
            HttpEntity<String> entity = new HttpEntity<String>(null, null);
            RestTemplate restTemplate = new RestTemplate();
            ResponseEntity<byte[]> bytes = restTemplate.exchange(url, HttpMethod.GET, entity, byte[].class);
            if (bytes.getBody().length <= 100) {
                if(urlList.containsKey(urlhref)){
                    Integer failCount = urlList.get(urlhref);
                    if(failCount > 3){
                        System.out.println("下载失败：" + cl + " / " + pdfFile +"  " + urlhref);
                        return;
                    }
                    failCount++;
                    urlList.put(urlhref , failCount);
                }else{
                    urlList.put(urlhref , 1);
                }

                createPDF(folder , cl ,  pdfFile , urlhref);
            }else{
                if (!destFile.exists()) {
                    try {
                        destFile.createNewFile();
                    } catch (Exception e) {
                        e.printStackTrace();
                    }
                }
                try (FileOutputStream out = new FileOutputStream(destFile);) {
                    out.write(bytes.getBody(), 0, bytes.getBody().length);
                    out.flush();
                } catch (Exception e) {
                    e.printStackTrace();
                }
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

最终成果：

我们的项目开发完成之后通常要做一个演示网站，那么如何防止我们辛苦开发的网站被别人滥用呢？我们可以通过在网页上添加水印来注明所有人的信息，像下面这个样子。

那么如何添加水印呢，今天就来介绍三种比较常用的添加水印的方法。下面所有的网页都以若依的后台管理系统为例。

利用CSS样式添加水印

添加的水印效果如图所示

具体做法是我们定义一个水印的样式——

floating-watermark，然后在需要被添加水印的标签中引用这个样式。样式案例如下：
.floating-watermark {
position: fixed;//这个属性使元素相对于浏览器窗口固定定位，这意味着即使页面滚动，元素也会保持在固定位置 top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
//这个属性设置了元素的背景图像。在这里，使用了一个数据URI来嵌入一个SVG图像。这个SVG图像包含了倾斜的“测试水印”文字
background-image: url('data:image/svg+xml;utf8,<svg xmlns="SVG namespace" width="400" height="400"><text x="50" y="200" font-size="30" fill="rgba(0, 0, 0, 0.1)" transform="rotate(-45, 50, 200)">测试水印</text></svg>');
background-repeat: repeat;
z-index: 1000;//这个属性设置了水印的图层，值越大则越靠上
}

Canvas元素添加水印

使用Canvas来创建满屏倾斜的水印文字涉及到在Vue组件中使用JavaScript来动态绘制水印。效果如下。

具体做法是在js中定义一个绘制水印的方法——drawWatermark，然后在组件的mounted生命周期钩子中调用drawWatermark方法，以确保在组件加载时绘制并显示水印。样例写法如下。

drawWatermark() {
let canvas = document.createElement('canvas');
const spacing = 300; // 水印间的间距
canvas.width = window.innerWidth * 2; // Canvas的宽度为视口宽度的两倍
canvas.height = window.innerHeight * 2; // Canvas的高度为视口高度的两倍

let ctx = canvas.getContext('2d');
ctx.font = '30px Arial'; // 字体大小
ctx.fillStyle = 'rgba(0, 0, 0, 0.1)'; // 字体颜色和透明度
ctx.rotate(-Math.PI / 4); // 将文字旋转45度
​
// 在Canvas上重复绘制倾斜的文字
for (let x = -canvas.width; x < canvas.width; x += spacing) {
for (let y = -canvas.height; y < canvas.height; y += spacing) {
ctx.fillText('测试水印', x, y);
}
}
​
// 创建一个新的div元素用于显示水印
const watermarkDiv = document.createElement('div');
watermarkDiv.style.position = 'fixed';
style.top-正在西部数码(www.west.cn)进行交易 = '0';
watermarkDiv.style.left = '0';
watermarkDiv.style.width = '100%';
watermarkDiv.style.height = '100%';
watermarkDiv.style.backgroundImage = `url(${canvas.toDataURL()})`;
watermarkDiv.style.backgroundRepeat = 'repeat';
watermarkDiv.style.pointerEvents = 'none';
watermarkDiv.style.zIndex = '9999'; // 设置高z-index值
​
document.body.appendChild(watermarkDiv);
}

第三方工具库添加水印

最后一种方法是利用第三方工具库来实现添加水印的效果，这里我推荐

vue-watermark-directive组件。效果如图所示。

首先我们需要安装vue-watermark-directive组件。

npm install vue-watermark-directive --save

然后在项目中引用组件，修改main.js

import VueWatermark from 'vue-watermark-directive';

最后在标签中使用

<div class="app-container" v-watermark="'测试水印'">

总结

这三种方法中Canvas使用灵活，CSS方法和第三方组件简单易用，大家可以根据自己项目的情况选择一种使用。

更多文章推荐公众号【程序员老J】