前端截图保存

Hyao-J

已于 2023-03-30 18:29:32 修改

阅读量238

点赞数

文章标签：前端 javascript vue.js

于 2023-03-30 17:21:46 首次发布

本文链接：https://blog.csdn.net/qq_48492312/article/details/129861061

版权

文章介绍了一种在Vue3应用中使用html2canvas库捕获弹窗内容并转换为图片，然后利用JSPDF将图片整合生成PDF的方案。通过设置相关参数，可以调整导出的图片质量和PDF布局。此外，还提到了其他可探索的实现方法。

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

需求

我的需求是将弹窗里面的内容进行导出成图片

实现方法

使用第三方插件
html2canvas、jscapture、vue-print-nb、jspdf、浏览器自带打印

实现方式

html2canvas为例

<div ref="screenshotArea" id="pdf_bi">
	/* 需要打印的内容 */
</div>
<button @click='export'>导出</button>

<script>
// 这边进行导入
import html2Canvas from 'html2canvas';
import JsPDF from 'jspdf';
export default defineComponent({
	setup(){
		const screenshotArea = ref()
		const export = () =>{
				html2Canvas(screenshotArea.value)
                .then(canvas => {
                    const imgUrl = canvas.toDataURL();
                    const link = document.createElement('a');
                    link.download = 'Bi.jpg';
                    link.href = imgUrl;
                    link.click();
                });
		}
		return{
		screenshotArea ,
		export
		}
	}
})

借鉴于：如何实现 vue3.0 + html2canvas 一键截图保存

配合JSPDF 导出pdf

由html2canvas生成图片，再由JSPDF生成pdf

			// html同上
            var title = "BI分析";
            var dom = document.getElementById("pdf_bi");  // html内容
            html2Canvas(dom, {
                allowTaint: true,  // 允许不同源的图片污染画布
                scrollY: 0,   // y轴滚动位置
                scrollX: 0,   // x轴滚动位置
                useCORS: true, // 跨域
                width: 1240, // 固定,防止截断
                dpi: window.devicePixelRatio*4,  // 解决模糊度
                scale:4,  // 渲染的比例
                height: dom.offsetHeight
            }).then(function (canvas) {
                var contentWidth = canvas.width; // canvas宽
                var contentHeight = canvas.height; // canvas高
                var pdfWidth = (contentWidth + 10) / 2 * 0.75; 
                var pdfHeight = (contentHeight + 200) / 2 * 0.75; // 底部留白
                var imgWidth = pdfWidth;
                var imgHeight = contentHeight / 2 * 0.75; // 图片留白
                var pageData = canvas.toDataURL("image/jpeg", 1.0);
                var pdf = new JsPDF("", "pt", [pdfWidth, pdfHeight]);
                pdf.addImage(pageData, "jpeg", 32, 32, imgWidth, imgHeight); // 图片 格式 左右边距  上下边距  宽 高
                pdf.save(title + ".pdf");
            });