web将pdf转成图片以及图片转回pdf的方法

索然无味的sass系统开发中突然加入了一个稍微有那么点意思的需求。
产品对一个2年前的项目一顿花里胡哨的操作之后终于定下了这个看似高端实则有点多余的功能。
我的测试项目脚手架是vite-react。
1.pdf转图片
主要是使用了pdf.js这个js库，可以支持base64(input选择文件)和url的形式
文档：https://github.com/mozilla/pdf.js/blob/master/src/display/api.js
下载：Getting Started
注意：这个库我没有在npm上找到只能老老实实的去下载然后script引入
jq和pdf.js和pdf.worker.js通过cdn引入但是这里还需要一个cmaps的文件夹这个文件夹是在上面下载的文件夹的web文件夹下，那这个文件夹复制出来放到你的项目中。
这里说下遇到的几个bug
1.pdf中的汉字在图片中不能显示出来，需要引入cmaps这个文件夹兵设置cMapUrl为cmaps路径和cMapPacked为true
2.转化后的图片内容呈现180旋转，getViewport需要去设置rotation参数为0
3.旧版本的pdf.js是render直接就可以.then进行promise，新版本需要promise.then
目录

  <script type="text/javascript" src="http://static.runoob.com/assets/jquery/2.0.3/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.9.359/pdf.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.9.359/pdf.worker.min.js"></script>

const pdftoimg = () => {
    // base64和url皆可
    let base64Str = "https://zh-pre.oss-cn-hangzhou.aliyuncs.com/******.pdf"
    // let base64Str = "data:application/pdf;base64,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TDxkJcA1n+p9BeEdV7K2hj9kNXczO+frgJdcBiwesqL7wQOzNp/4c876nskdsqo76p7xfy+cPyZclrT9HLwhK3smCR0fK5Q3fBheK1xkGbBoyCqf6taZJ88c6nZaEU/ZiwcLlBKABIE9A5evN3wvZ+hEvLnnd9nA1Vc/MkG5exv0Aw9mmUM/LugGXiww5x6GtQIHmWu3dQK3/HQHssPWHa0xe61qgc89+Nj7FssOs2i7VjSVAj1+teaodc+I7dKI2hEPeQM+te6JWv9MNxVVC3zpDfjFtsnygMUbsFTgW2/AYsS2K127kDYUA/NeeEt12HbVhswdsFTgN4/ATvu26pBNgyiwMuS0QRZYHrJgwCSA5SGbolMpAJeGnBaeSgIYHYsKTyUBNFqEhxIBOgQgIeC77N8WBbBc5XqHF5cKYLWvAuBGXzAAAQQQQAABBBBAAJcPcFe/tVkB8HS/1zbLBrr+s7PPUgACuNKAO/rktkk2UGUAAggggAACCCCAANICTtwJtgW/QF0BCCCAAGoGhmOaa3MBUglAAHUHIIC6AxBA3S0j4B9WNV99CmVuZHN0cmVhbQplbmRvYmoKMTYgMCBvYmoKODEzCmVuZG9iagoxNyAwIG9iago8PAovVGl0bGUgPEZFRkYwMDYxMDA2OTAwN0EwMDY4MDA3OTAwMkQwMDY4MDA3NDAwNjkwMDM3MDA2NzAwMDA+Ci9DcmVhdGlvbkRhdGUgKEQ6MjAyMTA5MjQxMTA3MzgpCi9Nb2REYXRlIChEOjIwMjEwOTI0MTEwNzM4KQovUHJvZHVjZXIgKGh0dHA6Ly93d3cuaW1hZ2VtYWdpY2sub3JnKQo+PgplbmRvYmoKeHJlZgowIDE4CjAwMDAwMDAwMDAgNjU1MzUgZiAKMDAwMDAwMDAxMCAwMDAwMCBuIAowMDAwMDAwMDU5IDAwMDAwIG4gCjAwMDAwMDAxMTggMDAwMDAgbiAKMDAwMDAwMDMwMCAwMDAwMCBuIAowMDAwMDAwMzg0IDAwMDAwIG4gCjAwMDAwMDA0MDIgMDAwMDAgbiAKMDAwMDAwMDQ0MCAwMDAwMCBuIAowMDAwMDAwNDYxIDAwMDAwIG4gCjAwMDAwMDE4NjQgMDAwMDAgbiAKMDAwMDAwMTg4NCAwMDAwMCBuIAowMDAwMDAxOTExIDAwMDAwIG4gCjAwMDAwMDI5ODAgMDAwMDAgbiAKMDAwMDAwMzAwMCAwMDAwMCBuIAowMDAwMDAzMDIyIDAwMDAwIG4gCjAwMDAwMDMwNDIgMDAwMDAgbiAKMDAwMDAwNDA0NCAwMDAwMCBuIAowMDAwMDA0MDY0IDAwMDAwIG4gCnRyYWlsZXIKPDwKL1NpemUgMTgKL0luZm8gMTcgMCBSCi9Sb290IDEgMCBSCi9JRCBbPGEzNDU0ZmUxYTJlNjc5N2YxNDEyYTAyYTJiODY2MWE2NjZiMWQ5YThhOWU2MzM3ZmM1YWIyYzBhZjJiMDI0N2Q+IDxhMzQ1NGZlMWEyZTY3OTdmMTQxMmEwMmEyYjg2NjFhNjY2YjFkOWE4YTllNjMzN2ZjNWFiMmMwYWYyYjAyNDdkPl0KPj4Kc3RhcnR4cmVmCjQyNDgKJSVFT0YK"
    pdfjsLib.workerSrc = "pdf.worker.js";
    let loadingTask = pdfjsLib.getDocument({
      url: base64Str,
      cMapUrl: './cmaps/', // 解决图片没有汉字的问题
      cMapPacked: true // 解决图片没有汉字的问题
    });
    loadingTask.promise.then(function (pdf) {
      pdf.getPage(1).then((res) => {
        let viewport = res.getViewport({
          scale: 1,
          rotation: 0,
          offsetX: 0,
          offsetY: 0,
          dontFlip: false,
        }); // 默认会旋转180度需要设置回来rotation：0
        let canvas = document.createElement("canvas");
        let context = canvas.getContext("2d");
        canvas.height = viewport.height;
        canvas.width = viewport.width;
        let renderTask = res.render({
          canvasContext: context,
          viewport: viewport,
        });
        renderTask.promise.then(() => {
          downland(canvas.toDataURL("image/jpeg", 1), "文件名.jpeg");
        });
      });
    });
  };
  const downland = (base64Str: string, name: string) => {
    // 下载
    let dom = document.createElement("a");
    dom.download = name;
    dom.href = base64Str;
    document.body.appendChild(dom);
    dom.click();
    document.body.removeChild(dom);
  };

2.图片转pdf
主要是使用jsPDF这个插件这个在npm上是发布了的所以直接npm i -S jspdf可以支持base64(input选择文件)和url的形式
思路：将base64或url放到img对象的src上得到图片宽高，然后获取到pdf页面的宽度，通过这几个参数计算图片在pdf中的宽高。
注意：
1.jspdf添加图片不能是网络图片，只能是base64因此需要用到canvas
2.这里需要处理canvas图片跨域相关的问题img.setAttribute("crossOrigin", "anonymous")

import { jsPDF } from "jspdf";

const imgtopdf = () => {
    // 插件：jsPDF
    // 直接base64
    let pdfobj = new jsPDF();
    let str =  "data:image/png;base64,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";
    // url直接转base64生成pdf
    let imgUrl =     "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fww4.sinaimg.cn%2Fmw690%2F002rQI5Bgy1gtd1i7zr87j60pk0f0tbc02.jpg&refer=http%3A%2F%2Fwww.sina.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1635210757&t=ef92d4dd44ccc23cbc443961f8c5bdf4";
    let img = new Image();
    img.setAttribute("crossOrigin", "anonymous"); // 解决canvas的toDataURL图片跨域问题
    img.src = imgUrl;
    img.onload = () => {
      let PDFWidth = pdfobj.internal.pageSize.getWidth();
      let widthRate = PDFWidth / img.width;
      let w = PDFWidth;
      let h = img.height * widthRate;
      let ctx = document.createElement("canvas");
      ctx.width = w;
      ctx.height = h;
      let context = ctx.getContext("2d");
      context?.drawImage(img, 0, 0, w, h);
      let base64Canvas = ctx.toDataURL("image/jpeg", 1);
      pdfobj.addImage(base64Canvas, "jpeg", 0, 0, w, h);
      pdfobj.save("demo.pdf"); // 直接下载
    };
  };

总结
通pdf转图片需要注意的地方会比较多，通过上述的操作让我们可以直接在web端不需要经过后台就可以进行pdf和图片之间的相互转化。