html怎么用pdf保存,html保存为PDF

PDF 保存

原理 html转canvas再转pdf

以下是React中使用，改成VUE使用原理也差不多

该方案胜在省事，但是因为是转图片存，所以分页处可能会有点问题

第三方库

yarn add html2canvas jspdf

代码

直接调用handlePDF方法即可下载。

import html2Canvas from "html2canvas";

import * as jsPDF from "jspdf";

handlePDF = () => {

// 获取需要打印的Dom节点

const pdfDom = document.getElementsByClassName("pdf")[0];

html2Canvas(pdfDom, {

windowWidth: pdfDom.scrollWidth,

windowHeight: pdfDom.scrollHeight + 200,

height: pdfDom.scrollHeight + 200,

// 截屏起止位置 scrollX、scrollY

scrollY: 0,

// 放大两倍，防止模糊

scale: 2

}).then(canvas => {

var contentWidth = canvas.width;

var contentHeight = canvas.height;

var pageHeight = (contentWidth / 592.28) * 841.89;

var leftHeight = contentHeight;

//页面偏移

var position = 0;

//a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高

var imgWidth = 595.28;

var imgHeight = (595.28 / contentWidth) * contentHeight;

var pageData = canvas.toDataURL("image/jpeg", 1.0);

var pdf = new jsPDF("", "pt", "a4");

//有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)

//当内容未超过pdf一页显示的范围，无需分页

if (leftHeight < pageHeight) {

pdf.addImage(pageData, "JPEG", 20, 40, imgWidth, imgHeight);

} else {

while (leftHeight > 0) {

pdf.addImage(pageData, "JPEG", 20, position + 40, imgWidth, imgHeight);

leftHeight -= pageHeight;

position -= 841.89;

//避免添加空白页

if (leftHeight > 0) {

pdf.addPage();

}

pdf.save(`方案配置.pdf`);

});

};

html怎么用pdf保存,html保存为PDF相关推荐

Py：利用pyautogui实现自动将pdf文件(需手动设定pdf总页数)自动翻页并截取另存为图片形式，或自动隔0.1秒自动截笔记本全屏保存到指定文件夹
Py:利用pyautogui实现自动将pdf文件(需手动设定pdf总页数)自动翻页并截取另存为图片形式,或自动隔0.1秒自动截笔记本全屏保存到指定文件夹目录实现步骤和结果核心代码实现步骤和结果 ...
python 保存pdf文件_PyPDF2读取PDF文件内容保存到本地TXT实例
我就废话不多说了,大家还是直接看代码吧! from PyPDF2.pdf import PdfFileReader import pandas as pd def Pdf_to_txt(pdf): f ...
.net core 文件流保存图片_如何将图片打包成PDF文件进行保存？
如何将图片打包成PDF文件进行保存?我们都知道PDF文件是一种电子文档发行和数字化信息传播的理想文档格式,支持跨平台传输.对普通读者而言,用PDF制作的电子书具有纸版书的质感和阅读效果,可以逼真地展现 ...
dataframe保存为txt_Word，PDF，PPT，TXT之间的相互转换方法
一.把PPT转WORD形式的方法 1．利用"大纲"视图打开PPT演示文稿,单击"大纲",在左侧"幻灯片/大纲"任务窗格的"大纲& ...
PyPDF2读取PDF文件内容保存到本地TXT
利用PyPDF2读取PDF文件内容保存到本地TXT from PyPDF2.pdf import PdfFileReader import pandas as pddef Pdf_to_txt(pdf ...
一零二八、将csdn文章内容保存成 html、pdf、md格式
目录一.获取专栏地址二.下载转换工具三.创建HTML MD PDF 文件夹四.启动程序五.源代码代码思路: 1.确定目标需求:将csdn文章内容保存成 HTML.PDF.md格式- 1.1 ...
怎么把PDF调方向保存？这几个方法值得收藏
小伙伴们在工作的时候,有时候领导会发PDF文件要你查阅重要内容,但不是每次收到的PDF文件都是无损的,有时候打开后发现里面内容杂乱并且页面方向不一致,这个时候有些小伙伴不知道怎么办,那么我们应该怎 ...
Android pdf转换bitmap保存到本地
Android pdf转换bitmap保存到本地 PDF转换成图片保存到本地 Android有自带的API提供首先要把PDF文件下载到本地,下载成功使用下载就最简单的IO下载都行例如: try ...
ppt保存类型中无html,ppt保存类型里没有pdf怎么办？这样做即可！
ppt保存类型里没有pdf怎么办?相信大家在平常的工作中应该会经常遇到文件格式转换的问题,就比如将PPT文件转换为PDF文件.不知道大家有没有遇到过这种情况就是在保存PPT文件另存为的时候没有PDF这 ...
微信小程序设置打开pdf并进行保存到本地，下次打开就无需进行服务器请求
1.项目需求:点击下面图片所示,请求服务器获取PDF地址 2.获取到pdf地址后保存到本地,下次打开无需在请求公分三个步骤 1.使用wx.downloadFile 微信downloadFile 2. ...

html怎么用pdf保存,html保存为PDF

html怎么用pdf保存,html保存为PDF相关推荐

最新文章

热门文章