更新记录

1.0.6（2024-03-18）

1. 新增pdfFileName属性，以自定义导出pdf的文件名，为空则默认以当前时间戳命名
2. 更新文档

1.0.5（2024-02-06）

1. 更新文档

1.0.4（2024-02-06）

1. 重大更新，详情见文档
2. 示例工程更新

平台兼容性

sp-html2pdf-render

写在前面

该组件需要引入对应的依赖才能使用，建议使用yarn安装

yarn add html2canvas
yarn add jspdf

注意：在使用npm或者pnpm时，在引入jspdf时，因为jspdf又依赖与其他依赖，所以导致在使用npm或pnpm时，无法自动引入其他相关依赖，会导致报错，这个时候需要你手动去挨个安装jspdf所需要的依赖。使用yarn或npx安装则可自动引入依赖所依赖的依赖，无需我们手动引入

该组件在sp-html2canvas-render插件上更新添加pdf相关功能，若只需要html转canvas生成图片的功能，还请移步至sp-html2canvas-render插件

props

props: {
    // 要渲染dom的id
    domId: {
        type: String,
        default: ''
    }
}

emits

@renderCanvas(e)    canvas渲染完成后的回调 (e: 返回的canvas图片，base64格式)
@savePDF(e)      PDF生成后的回调 (e: 返回的PDF文件，base64格式)

使用方式

详见示例项目，强烈建议先导入示例工程瞅几眼

旧版本使用方式代码预览

// 以下代码使用方式为v1.0.3及之前的版本

<!-- html部分 -->

<sp-html2pdf-render
    domId="render-dom"
    @savePDF="savePDF"
    @renderCanvas="renderCanvas"
>
    <!-- 主渲染内容 -->
    <view class="render-main">
        <!-- 导出的PDF会撑满宽度，所以请事先规范好要渲染盒子的宽度，建议800px，PDF以一般A4纸大小尺寸，会自动分页 -->
        <view id="render-dom" class="render-content">要导出PDF的dom盒子</view>
    </view>
    <!-- #ifdef H5 -->
    <template #control="{ h2pRender }">
        <!-- APP端无法使用此h2pRender对象，故APP端只能在组件中修改控制控件的样式等 -->
        <button class="exp-btn" size="mini" @click="h2pRender.renderDom">PDF导出</button>
    </template>
    <!-- #endif -->
</sp-html2pdf-render>

// js部分

// 要将生成的pdf文件保存或分享出去，需要先将base64转换成文件路径
import { base64ToPath } from '@/uni_modules/sp-html2pdf-render/components/sp-html2pdf-render/index.js'

function renderCanvas(e) {
    // 这里是要渲染dom的canvas生成的base64图片，
    // 若想生成其他格式（文件路径等），可在组件的sp-html2pdf-render/index.js文件中调用对应方法
    console.log('==== renderCanvas :', e) 
}

function savePDF(e) {
    console.log('==== savePDF :', e)
    uni.showLoading({
        title: '导出中'
    })

    // 将base64转换成文件路径
    base64ToPath(e)
        .then((path) => {
            // 使用openDocument打开文档，在真机中会自动调出文件面板
            uni.openDocument({
                filePath: path,
                success: (res) => {
                    console.log('==== openDocument res :', res)
                },
                fail: (err) => {
                    console.log('==== openDocument err :', err)
                }
            })
        })
        .catch((error) => {
            console.error('base64ToPath error', error)
        })
        .finally(() => {
            uni.hideLoading()
        })
}

备注

插件市场上很多其他html转pdf插件，本质上大都是先html转canvas生成图片后再转pdf，本插件也是此逻辑，但是大都插件都有着诸多限制：例如需要购买自定义App原生插件的，或者生成pdf文件的base64有大小限制的等。

经实测，该组件可以生成相对较为复杂的页面导出，也无需使用App原生插件，在安装完html2canvas和jspdf的依赖包后即可开箱即用。(强烈建议使用yarn安装依赖)

强烈建议先导入示例工程瞅几眼

问题

toDataURL on HTMLCanvasElement都是图片不支持跨域导致的。开发者工具可能可以正确画布出来并导出为图片，但是手机画布导出的时候就会报错，这个时候就需要转成base64 了，先尝试用代码转，如果不能转，就在站点 在线base64图片互转，然后把base64保存到文件里面。

你不需要再去搜罗或者手写一个网络或本地路径转base64的方法了，本插件内置了工具方法urlToBase64，使用方式详见 基于html2canvas和renderjs 指定盒子截图 截屏 截长屏，或者在示例工程的示例二页面案例。

其他

也许在这个插件 基于html2canvas和renderjs 指定盒子截图 截屏 截长屏 你会找到更多问题的讨论

重大更新（v1.0.4 2024-02-06）

自2024-02-06日将出v1.0.4版本重大更新，部分写法将修改，自由度更高，更加完善

1.不再推荐内联方式

v1.0.4版本推荐使用组件方式使用，完全可以作为一个常规的组件，无论是简洁度还是自由度都打破了原先renderjs内联写法的局限性，所以不再推荐示例工程中内联方式案例使用了

2.组件化使用方式

<template>
  <view class="index">
    <sp-html2pdf-render
      domId="render-dom"
      ref="renderRef"
      pdfFileName="这是一个pdf文件"
      @beforeSavePDF="beforeSavePDF"
      @afterSavePDF="afterSavePDF"
      @successSavePDF="successSavePDF"
      @renderCanvas="renderCanvas"
    ></sp-html2pdf-render>
    <!-- 主渲染内容 -->
    <view id="render-dom" class="render-content">
      <h4>有问题欢迎进群讨论，QQ交流群: 852637893</h4>
    </view>
    <!-- 导出按钮自定义 -->
    <button @click="cusRenderDom">导出</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
    }
  },
  methods: {
    renderCanvas(e) {
      // e为导出的pdf的base64格式文件
      console.log('==== renderCanvas :', e)
    },
    beforeSavePDF(e) {
      // e为导出的pdf的base64格式文件
      console.log('==== beforeSavePDF :', e)
    },
    afterSavePDF(e) {
      // e为导出的pdf的base64格式文件
      console.log('==== afterSavePDF :', e)
    },
    successSavePDF(path) {
      // e为导出的pdf的文件临时路径
      console.log('==== successSavePDF :', path)
    },
    cusRenderDom() {
      // 调用组件实例中h2pRenderDom方法
      this.$refs.renderRef.h2pRenderDom()
    }
  }
}
</script>

// props参数
props: {
  // 要渲染dom的id
  domId: {
    type: String,
    default: ''
  },
  // 是否显示导出loading
  showLoading: {
    type: Boolean,
    default: true
  },
  // 导出的pdf文件名，不传则默认使用当前时间戳，已自动拼接后缀
  pdfFileName: {
    type: String,
    default: ''
  }
}

// emit事件
renderCanvas // canvas渲染完成时触发
beforeSavePDF // 保存pdf之前回调
afterSavePDF // 保存pdf之后回调
successSavePDF // 保存pdf成功回调

// 组件方法
h2pRenderDom // 手动一键触发dom从渲染成canvas至导出成pdf一些列操作的事件

注意

1. sp-html2pdf-render不再推荐将要渲染的dom盒子放在组件内部，任由开发者自定义，要渲染的内容只和绑定的domId有关
2. 若点击导出时弹出文件系统有问题的toast，可能是未能正常唤醒文件系统，重新点一下导出即可

写在最后

若对插件有任何疑问或者优化建议，欢迎在评论区留言，在插件市场中的私信消息本人可能不经常留意，导致没能及时回复， 可以加入本人的插件问答QQ交流群: 852637893，欢迎进群交流。