【
Vue
项目】
html
2canvas +
jspdf
实现将页面
内容
生成
PDF
及相关
问题
解决方案
（页面被
分页
分割
问题
、
html
2canvas生成图片只有一半）
文
中
内容
是在
Vue
项目
中
使用
html
2canvas和
jspdf
插件实现将页面的
内容
生成
PDF
，并记录在
使用
过程
中
遇到的一些
问题
和
解决方案
。文
中
将会贴出很多参考文章，如果各位有需要，可以前往原文章查阅。
html
2canvas +
jspdf
介绍
使用
方法
分页
分割
问题
html
2canvas生成图片只有一半其他参考文章
1、
html
2canvas
该插件允许我们直接在浏览器上对网页或其部分进行“截图”操作，但是屏幕截图基于 DOM，这一点很关键。这就会导致截图的结果，很可能不是自己想要的。.
// let top = document.getElementById('main');
// if (top != null) {
// top.scrollIntoView();
// top = null;
const that = this;
var mai...
如果不是有特别的需求，比如打印或者
分页
，还是建议能在一页显示
pdf
，这样就避免了
文字
被
截断
的风险。
不做
分页
处理
html
2canvas(copyDom[0], opts).then((canvas) => {
debugger
var contentWidth = canvas.width;
var contentHeight =...
原文：https://blog.csdn.net/pratise/article/details/79249943 https://www.jianshu.com/p/96a7ee1341be
1 、我们要添加两个模块
第一个.将页面
html
转换成图片
npm install --save
html
2canvas
第二个.将图片生成
pdf
npm install
jspdf
--save
2、定义全局函数..创建一个
html
To
Pdf
.js文件在指定位置.我个人习惯放在('src/compon..
import ‘./
jspdf
.min.js’
如果有滚动条，先把滚动条置顶
document.body.scrollTop = document.documentElement.scrollTop = 0
if (!selector) {
throw new Error(‘缺少selector’)
let el = document.querySelector(selector)
if (!el) {
throw new Er
Vue
使用
html
2canvas和
jsPDF
可以实现将网页
内容
导出
为
PDF
文件的功能。具体步骤如下：
1.安装
html
2canvas和
jsPDF
库，可以
使用
npm或yarn进行安装。
2.在需要
导出
PDF
的组件
中
引入
html
2canvas和
jsPDF
库。
3.封装一个方法，
使用
html
2canvas将需要
导出
的
内容
转换为canvas，再
使用
jsPDF
将canvas转换为
PDF
文件并下载。
下面是一个示例代码：
<template>
<!-- 需要
导出
为
PDF
的
内容
-->
<div ref="content">
<h1>Hello, World!</h1>
<p>This is a
PDF
export example.</p>
<button @click="export
PDF
">Export
PDF
</button>
</template>
<script>
import
html
2canvas from '
html
2canvas';
import
jsPDF
from '
jspdf
';
export default {
methods: {
export
PDF
() {
// 获取需要
导出
的
内容
const content = this.$refs.content;
//
使用
html
2canvas将
内容
转换为canvas
html
2canvas(content).then(canvas => {
// 将canvas转换为
PDF
文件
const
pdf
= new
jsPDF
('p', 'mm', 'a4');
const imgData = canvas.toDataURL('image/png');
pdf
.addImage(imgData, 'PNG', 0, 0, 210, 297);
pdf
.save('export.
pdf
');
</script>
