前言

根据自身当下技术的水平和实际情况，做一个简单的记录。

需求描述

在项目中有采购合同和销售合同，这些合同新建好之后都需要有人去审核，审核通过后需要把合同生成一个pdf文件然后后端给保存起来

在项目中有采购合同和销售合同，这些合同新建好之后都需要有人去审核，审核通过后把最新的合同页面生成一个pdf（采用的是前端自动生成pdf），需要注意的是生成好pdf之后不下载，需要把pdf文件流上传到后端.

实现方案

思路：通过 html2canvas 将 HTML 页面转换成图片，然后再通过 jspdf 将图片的 base64 生成为 pdf 文件。

Vue中前端实现生成 PDF 并下载参考文章：https://developer.aliyun.com/article/1087042#comment
前端vue的JsPDF html2canvas 生成pdf并以文件流形式上传到后端：https://blog.csdn.net/qq_38594056/article/details/118212082

当然在过程中也遇到了一些问题，如安装组件库，这里项目使用的是Jeecg-boot开源框架，一开始使用npm安装html2canvas、jspdf怎么都下载不下来，可能是因为网络的问题，因为npm包管理器的源是在国外，所以想着使用npm国内的镜像，安装npm源的淘宝镜像，命令如下：

npm install cnpm

如果需要全局安装可以执行如下命令：

npm install cnpm -g

接下来再依次安装html2canvas、jspdf，命令如下：

cnpm install html2canvas --save

cnpm install jspdf --save

补充：我这里Node版本是v16.13.2，npm版本是9.7.2

功能需求-根据页面生成pdf，pdf不需要下载只需把文件流上传到服务器相关推荐

vue 后台返回的文件流进行预览_vue项目-pdf预览和下载，后台返回文件流形式
背景:正好最近碰到了这种需求,记录下来,方便以后查看. 后端返回的文件流数据如下图所示: 后台返回数据.png 一.pdf的预览一开始的时候百度了很多方法,有建议用pdfJs插件的,有iframe嵌 ...
SpringBoot+Vue+mybatis生成pdf文件（表头跟页码，适应上传linux服务器后的操作）
SpringBoot+Vue+mybatis生成pdf文件(表头跟页码,适应上传linux服务器后的操作) 为什么使用后端去生成说明依赖后端目录控制器代码模板代码前端代碼最終效果为什么 ...
pdf如何转word？只需两步即可完成在线pdf转word
pdf格式文档良好的阅读性以及便捷性,使得其得到了越来越广泛的使用,但是如果我们想要对其中的某些内容进行二次编辑的时候就比较不方便了,需要先将pdf转word后再使用,那么pdf如何转word呢?今天 ...
打包成apk，生成apk文件，上传到网站服务器提供链接下载
Android开发把项目打包成apk: 做完一个Android项目之后,如何才能把项目发布到Internet上供别人使用呢?我们需要将自己的程序打包成Android安装包文件--APK(Android ...
java0到9的字符怎么表示_java,_java 怎么生成一个0-9，a-z的一个44位字符串作为上传文件的名字，java - phpStudy...
java 怎么生成一个0-9,a-z的一个44位字符串作为上传文件的名字找到一个时间MD5加密的 package org.blog.controller; import java.io.File; ...
上传文件服务器怎么做,图片上传到服务器后怎么生成可直接访问的链接
我在客户端做头像上传,图片上传到服务器后保存在一个固定的文件夹内,现在我如何在客户端读取到这张图片. 运行环境是后端是node koa 相关代码exports.editcover = async (c ...
转换文档参数_Word、Excel、PDF多格式转换？只需1招全搞定
在工作学习中,我们常常会遇到一些文档需要进行格式转换,比如Word文档.excel表格与PDF的互转需求.而想要实现这一操作的技巧有很多,但今天君君要分享的这个PDF转换工具基本可以覆盖全平台了,真正 ...
【微信小程序】小程序实现文件的上传及预览，以PDF文件为例。
安卓系统和ios系统一开始被一篇ios预览PDF文件需要用到webview的博客给误导了,以为安卓预览文件需要调用wx.downloadFile()和wx.openDocument()这两个API, ...
ajax实现文件的上传（局部刷新页面，文件上传）
一.前端jsp页面代码: //注意,这里的form表单,只去id名 <form id="localAjax">文件:<input type="file& ...

功能需求-根据页面生成pdf，pdf不需要下载只需把文件流上传到服务器

前言

需求描述

实现方案

功能需求-根据页面生成pdf，pdf不需要下载只需把文件流上传到服务器相关推荐

最新文章

热门文章