vue.js 如何更改表格中的字体?setFont()仅更改标题字体

iyfamqjs  于 2023-08-07  发布在  Vue.js
关注(0)|答案(1)|浏览(174)

我正在编写一个Vue方法来生成我的数据的PDF文件。我正在尝试将字体类型“newFontType”应用于表格上的文本。

generatePDF() {
            let doc = new jsPDF({ orientation: 'l', format: 'a4' });
            doc.addFileToVFS('NEWFONT.TTF', NEWFONTS);
            doc.addFont('NEWFONT.TTF', 'newFontType', 'normal');
            doc.setFont('newFontType');
            doc.setFontSize(20);

            let header = ['id', 'name', 'quantity'];
            const title = 'All Data';
            const titleWidth = (doc.getStringUnitWidth(title) * doc.internal.getFontSize()) / doc.internal.scaleFactor;
            const xPos = (doc.internal.pageSize.getWidth() - titleWidth) / 2;
            const yPos = 20;
            doc.text(title, xPos, yPos);
            doc.setFont('newFontType', 'normal');
            doc.table(10, 30, this.data, header);

            doc.save('Report1' + '.pdf');

            doc = null;
        },

字符串
我尝试了doc.table(10,30,this.data,header,styles:{ font:'newFontType '});但是它不起作用我需要帮助。- 谢谢你-谢谢

icnyk63a

icnyk63a1#

在设置表格文本的字体时有一个小问题。以下是您的方法的更正版本:

generatePDF() {
        let doc = new jsPDF({ orientation: 'l', format: 'a4' });
        doc.addFileToVFS('NEWFONT.TTF', NEWFONTS);
        doc.addFont('NEWFONT.TTF', 'newFontType', 'normal');
        doc.setFont('newFontType');
        doc.setFontSize(20);
    
        let header = ['id', 'name', 'quantity'];
        const title = 'All Data';
        const titleWidth = (doc.getStringUnitWidth(title) * doc.internal.getFontSize()) / doc.internal.scaleFactor;
        const xPos = (doc.internal.pageSize.getWidth() - titleWidth) / 2;
        const yPos = 20;
        doc.text(title, xPos, yPos);
        
        doc.setFont('newFontType', 'normal'); // Remove this line, it's not needed
        doc.autoTable({
            startY: 30,
            head: [header],
            body: this.data,
            theme: 'grid',
        });
    
        doc.save('Report1' + '.pdf');
    
        doc = null;
    },

字符串
问题出在doc.setFont('newFontType', 'normal');行。这一行是不必要的,因为您已经使用doc.setFont('newFontType');将字体设置为'newFontType'。jsPDF-AutoTable库中用于生成表格的autoTable函数将自动继承当前字体设置,因此您无需重新设置。
使用更正后的方法,表中的文本也将使用“newFontType”字体。代码的其余部分看起来很适合在Vue应用程序中使用jsPDF生成一个包含表格和自定义字体的PDF文件。

相关问题