【JavaScript】实现页面中填写文档、电子签名，填写完后 转为pdf并自动下载；附带psd转图片预览效果

效果图：

需求：

 用户可以在线进行文档编辑，在线电子签名，然后点击可以另存为pdf文档

实现：

首先实现布局

让填写文档 随着页面的变化 一直保持居中

    
    
    
    



    

        

            

                

                    
                    
                    
                    
                
            
            

                

                    
                    
                    
                    
                
            
            

                

                    
                    
                    
                    
                
            
        

        提交
    
    
    

内容转为图片

然后将填写好的内容  一切进行截图

    
    
    
    



    

        

            

                

                    
                    
                    
                    
                
            
            

                

                    
                    
                    
                    
                
            
            

                

                    
                    
                    
                    
                
            
        

        提交
    
    
    
    

补充说明：

html2canvas是什么

html2canvas 是一个 JavaScript 库，用于将当前页面或指定的 HTML 元素转换为 元素

主要作用是实现将 HTML 元素转换为图像的功能，这样你就可以在网页上进行截图、生成缩略图、保存网页内容为图像等操作

电子签名

    
    
    
    



    
    

        取消
        保存
    

补充说明：

const url = URL.createObjectURL(blob); 生成的url是Blob URL

Blob URL与base64吗，有什么区别？

Blob URL 是一种用于引用二进制数据的特殊 URL 格式。它指向浏览器中的二进制数据块（Blob 对象），可以是图像、音频、视频或其他文件类型。Blob URL 的格式是 blob:/，其中 表示 URL 的来源， 是一个唯一的标识符。例如：blob:http://127.0.0.1:5500/d96d1b24-0a77-4010-b6c0-4d44ef95e485

Base64 是一种编码方式，用于将二进制数据转换为纯文本字符串。Base64 编码后的数据可以方便地传输和存储，但需要进行编码和解码才能使用

如何将 Blob 对象转换为 File 对象，将其作为文件上传到后台？

canvas.toBlob(blob => {
                    const url = URL.createObjectURL(blob);
                    const reader = new FileReader();
                    reader.readAsDataURL(blob);
                    reader.onload = function () {
                        const file = new File([blob], 'fileName.jpg', { type: blob.type });
                        const formData = new FormData();
                        formData.append('file', file);
                    }
                })

创建一个 FileReader 对象，使用 readAsDataURL(blob) 方法读取指定的blob，将其转换为 base64 编码的字符串。这个过程会触发 FileReader 的 onload 事件 

new File([blob], 'fileName.jpg', { type: blob.type }) 中的三个参数分别为

[blob]：要包含在 File 对象中的二进制数据，通常是一个 Blob 对象，用数组的形式传递。

'fileName.jpg'：File 对象的文件名，通常需要与上传的文件名保持一致。

{ type: blob.type }：File 对象的 MIME 类型（或内容类型），通常是上传文件的实际类型。

将图片转为pdf并下载

    
    
    
    



    

        

            

                

                    
                    
                    
                    
                
            
            

                

                    
                    
                    
                    
                
            
            

                

                    
                    
                    
                    
                
            
        

        提交
    
    
    
    
    

补充说明：

jspdf.umd.min.js 是什么

jsPDF（JavaScript PDF）库的压缩版本。jsPDF 是一个用于在客户端生成 PDF 文件的 JavaScript 库

主要作用是通过 JavaScript 生成 PDF 文件，使你能够以编程方式创建、编辑和下载 PDF 文档。

扩展：pdf如何转成图片

转成一张图

根据pdf页数转成多张图

pdf.min.js是做什么的，有什么作用

pdf.min.js是一个JavaScript库，用于在Web页面中显示和操作PDF文档。它提供了一系列的API和功能，使得在浏览器中嵌入和处理PDF文件变得更加容易

jspdf.umd.min.js与pdf.min.js 有什么区别

pdf.min.js是一个用于在Web页面中显示和操作PDF文档的库，它提供了显示、缩放、滚动、导航、搜索、标注和打印等功能。而jspdf.umd.min.js是一个用于生成PDF文档的库，它提供了创建、编辑和导出PDF文档的功能

完结撒花，有问题欢迎留言