Vue3 DataTable导出PDF报Roboto-Regular.ttf缺失错误如何解决

报错原因 #

pdfmake生成PDF默认使用Roboto字体，你已导入字体资源包但未挂载到pdfmake的虚拟文件系统，导致导出时无法读取字体文件触发报错。

修复步骤 #

1. 在导入pdfmake和字体资源的代码后，添加虚拟文件系统挂载逻辑
2. 可选：可根据需求配置自定义默认字体，避免依赖Roboto

修改后的完整脚本代码 #

<script>
import axios from "axios";
import $  from 'jquery';
import * as pdfMake from 'pdfmake/build/pdfmake';
import * as pdfFonts from 'pdfmake/build/vfs_fonts';
// 新增这行代码，挂载字体资源到pdfmake虚拟文件系统
pdfMake.vfs = pdfFonts.pdfMake.vfs;

export default {
  mounted() {
    this.getUsers();
  },
  methods: {
    getUsers() {
      axios
        .get("https://sistema-control-inventario.herokuapp.com/categoria/")
        .then((response) => {
          var table = $("#example1").DataTable({
            "responsive": true, "lengthChange": true, "autoWidth": false,
            "buttons": ["copy", "csv", "excel", "pdf", "print", "colvis"],
            "language": "",
            data: response.data,
            columns: [
              { data: "id_categoria" },
              { data: "categoria" },
              { data: "fecha" },
              // { defaultContent : '<button type="button" class="editar btn btn-primary"><i class = "fa fa-pencil-alt"></i></button> &nbsp;&nbsp;&nbsp;<button type="button" class="eliminar btn btn-danger" data-toggle="modal" data-target="#modalEliminar"><i class="fas fa-dumpster-fire"></i></button>'}
            ],
          }).buttons().container().appendTo('#example1_wrapper .col-md-6:eq(0)')
          //obtener_data_editar('',table);
        }).catch((error) => console.log(error.response));
    },
  },
};
var obtener_data_editar = function(tbody,table){
    $(tbody).on("click", "button.editar", function(){
        var data = table.row($(this).parent('tr')).data();
        console.log(data)
    })
}
</script>

额外兼容说明 #

如果挂载后仍有报错，可检查以下两点：

• 确认已安装datatables.net-buttons-pdfmake依赖包，该包是DataTable对接pdfmake导出功能的必要依赖
• 若不需要使用Roboto字体，可添加自定义字体配置，指定系统自带字体作为默认导出字体

内容的提问来源于stack exchange，提问作者Maicol Rojas