Vue页面生成PDF后调起浏览器打印

一、安装依赖

首先,需要安装 html2canvas 和 jsPDF 库。

javascript 复制代码
npm install html2canvas jspdf

二、创建公共方法+引入

在utils文件夹下创建两个文件分别为pdfExport.js和printPDF.js,代码如下:

  • pdfExport.js
javascript 复制代码
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';

export const exportToPDF = async (elementId) => {
    console.log('Exporting PDF...');
    const content = document.getElementById(elementId);
    if (!content) {
        console.error(`Element with id ${elementId} not found.`);
        return;
    }

    try {
        const canvas = await html2canvas(content);
        const imgData = canvas.toDataURL('image/png');
        const pdf = new jsPDF({
            orientation: 'portrait',
            unit: 'mm',
            format: 'a4'
        });

        // 获取页面尺寸
        const pageWidth = pdf.internal.pageSize.getWidth();
        const pageHeight = pdf.internal.pageSize.getHeight();
        
        // 计算图片宽高比
        const imgWidth = pageWidth;
        const imgHeight = (canvas.height * imgWidth) / canvas.width;

        // 分页添加图片
        let position = 0;
        while (position < imgHeight) {
            pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
            position += pageHeight;
            if (position < imgHeight) {
                pdf.addPage();
            }
        }

        // 将 PDF 转换为 Blob 对象
        const blob = pdf.output('blob');

        console.log('PDF Blob generated:', blob); // 打印生成的 Blob 对象信息

        return blob; // 返回生成的 Blob 对象,供后续使用
    } catch (error) {
        console.error('导出 PDF 失败:', error);
        throw error; // 抛出异常供调用者处理
    }
};
  • printPDF.js
javascript 复制代码
export const printPDF = (blob) => {
    try {
        const url = URL.createObjectURL(blob);
        console.log('PDF Blob URL:', url); // 打印生成的 Blob URL

        // 创建一个隐藏的 iframe
        const iframe = document.createElement('iframe');
        iframe.style.position = 'fixed';
        iframe.style.right = '0';
        iframe.style.bottom = '0';
        iframe.style.width = '0';
        iframe.style.height = '0';
        iframe.style.border = 'none';

        document.body.appendChild(iframe);

        // 设置 iframe 的 src 属性为 PDF 文件的 URL
        iframe.src = url;

        // 加载完成在进行打印操作,确保 PDF 加载完成
        iframe.onload = function() {
            iframe.contentWindow.focus();
            iframe.contentWindow.print();

            // 打印完成后移除 iframe 和释放 URL
            setTimeout(() => {
                // document.body.removeChild(iframe);
                URL.revokeObjectURL(url);
            }, 500)
        };
    } catch (error) {
        console.error('打印 PDF 出错:', error);
        throw error;
    }
};

创建好后在main.js中引入方法

javascript 复制代码
import { exportToPDF } from '../utils/pdfExport';
Vue.prototype.$exportToPDF = exportToPDF;

import { printPDF } from '../utils/printPDF';
Vue.prototype.$printPDF = printPDF;

三、使用

  • html
javascript 复制代码
<template>
	<div>
		<!-- 打印按钮 -->
		<span class="mr20" @click="printPageFn">打印页面</span>
		<!-- 需要打印的页面内容,可以是任意div,设置id就可以 -->
		<router-view id="contentToExport"/>
	</div>
</template>
  • Javascript
javascript 复制代码
// 打印页面
printPageFn(){
	//注意传入的id是否与页面设置的id一致
	this.$exportToPDF('contentToExport').then((blob) => {
		this.$printPDF(blob);
	});
},
相关推荐
还是鼠鼠2 小时前
图书管理系统 Axios 源码 __删除图书功能
前端·javascript·vscode·ajax·前端框架·node.js·bootstrap
轻口味2 小时前
Vue.js `Suspense` 和异步组件加载
前端·javascript·vue.js
还是鼠鼠3 小时前
图书管理系统 Axios 源码__编辑图书
前端·javascript·vscode·ajax·前端框架
北极象3 小时前
vue3中el-input无法获得焦点的问题
前端·javascript·vue.js
GISer_Jing4 小时前
react redux监测值的变化
前端·javascript·react.js
m0_528723814 小时前
react中useEffect的使用
前端·javascript·react.js
GISer_Jing4 小时前
AIGC时代的Vue或React前端开发
vue.js·react.js·aigc
customer085 小时前
【开源免费】基于SpringBoot+Vue.JS景区民宿预约系统(JAVA毕业设计)
java·vue.js·spring boot·后端·开源
Real_man5 小时前
noVNC 技术解析与最佳实践
javascript
大模型铲屎官6 小时前
HTML从入门到精通:链接与图像标签全解析
开发语言·前端·javascript·html·编程·链接标签·图像标签