Vue 实现页面导出A4标准大小的PDF文件，以及处理图片跨域不能正常展示的问题等

HuiRonmantic

已于 2024-05-15 09:31:20 修改

阅读量1k

点赞数 12

分类专栏：大前端文章标签： vue.js pdf javascript

于 2024-02-26 16:18:36 首次发布

本文链接：https://blog.csdn.net/weixin_41346436/article/details/136302171

版权

大前端专栏收录该内容

25 篇文章 7 订阅 ¥15.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了如何在Vue项目中实现将页面内容导出为符合A4标准的PDF文件，并解决在导出过程中图片因跨域无法正常显示的问题。通过创建htmlToPdf.js工具文件并在main.js中全局注册，用户可以方便地调用下载方法，指定最外层父级元素ID完成导出。

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

效果预览：

在这里插入图片描述

代码流程：首先在utils文件夹下创建htmlToPdf的js工具文件，然后在main.js中注册引用

htmlToPdf.js

// 导出页面为PDF格式
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'

export default {
  install(Vue, options) {
    Vue.prototype.getPdf = function (id) {
      var title = '导出试卷'
      if (id === null || id === undefined) {
        id = '#pdfDom'
      }
      html2Canvas(document.querySelector(id), {
        allowTaint: true,
      }).then(function (canvas) {
        const contentWidth = canvas.width
        const contentHeight = canvas.height
        const pageData = canvas.toDataURL('image/jpeg', 1.0)
        const pdfX = contentWidth
        const pdfY = contentHeight // 500为底部留白