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);
	});
},
相关推荐
不想有bug的小菜鸟11 分钟前
vue3使用iframe全屏展示pdf效果
前端·pdf
quitv17 分钟前
react脚手架配置别名
前端·javascript·react.js
化作繁星28 分钟前
在 Vue 3 中,如何缓存和复用动态组件
前端·vue.js·缓存
一只小姜丝3321 小时前
解决各大浏览器中http地址无权限调用麦克风摄像头问题
网络·vue.js·网络协议·http
Gazer_S2 小时前
【现代前端框架中本地图片资源的处理方案】
前端·javascript·chrome·缓存·前端框架
林的快手4 小时前
CSS默认样式
前端·css·vue.js·chrome·css3
贺今宵4 小时前
通过$attrs传递的未指定名称的modelValue值在子组件中修改
前端·javascript
lifire_H8 小时前
Canvas在视频应用中的技术解析
前端·javascript·音视频
林涧泣8 小时前
【Uniapp-Vue3】开发userStore用户所需的相关操作
前端·vue.js·uni-app
皓月当空hy10 小时前
vue3中测试:单元测试、组件测试、端到端测试
vue.js