Javascript算法实现PDF批量加盖不同宽度骑缝章，vue加持。

自在飞花轻似梦paofu

已于 2022-08-06 21:05:31 修改

阅读量1.8k

点赞数

分类专栏： js vue 文章标签： vue.js javascript 骑缝章 cropper.js

于 2022-07-28 23:18:06 首次发布

原创珍贵，转载请声明出处。

本文链接：https://blog.csdn.net/weixin_42277214/article/details/126044657

版权

本文介绍了如何利用Vue.js和cropper.js库来实现在PDF上批量加盖不同宽度的骑缝章。通过获取文件页数和设定章的总宽度，每个骑缝章的宽度随机且总和等于设定值，确保了章的自然分布。整个过程涉及到递归算法和DOM渲染。

摘要由CSDN通过智能技术生成

在这里插入图片描述

需求：
电子交易合同、电子文件需要加盖骑缝章，骑缝章的宽度并且是随机的。可盖1-2个骑缝章。
思路：
获取文件的页数pageNum，章宽width，按照页数使用裁剪组件把章裁剪成pageNum份，每一份骑缝章Math.random()宽度不同，但加起来的宽度等于width。最后再重新渲染到每一张纸上
技术：
vue、cropper.js、递归

1、获取电子纸张数量pageNum、获取完整章的宽度w，随机设置章宽，但是不要差w/pageNum太多，否则章可能宽度差异太大
2、使用裁剪工具cropper.js裁剪一枚完整章为pageNum个章。即pageNum张图片/骑缝章
3、页面上放好dom，vue自动渲染章

   <script>
      var vm = new Vue({
   
        el: "#app",
        data: {
   
        },
        methods: {
   
          getList: function () {
   
            // 完整章宽，x是自己得到的章宽度
            let imgWidth = x;
            let imgHeight=h //完整章高
            // y：章的个数
            // 完整章分割后生成的随机骑缝章图片宽度数组
            let stampFreeWithArr = [];
            for (let i = 0; i < y; i++) {
   
              if (i == y