PHPフレームワーク「Laravel」とActiveReportsJSで帳票を出力する

composer create-project laravel/laravel laravel-reporting --prefer-dist

cd laravel-reporting

・・・
（中略）
・・・
'timezone' => 'Asia/Tokyo',
・・・
（中略）
・・・
'locale' => 'ja',

DB_CONNECTION=sqlite
#DB_HOST=127.0.0.1
#DB_PORT=3306
#DB_DATABASE=laravel
#DB_USERNAME=root
#DB_PASSWORD=

php artisan make:model -a Invoice

public function up()
{
    Schema::create('invoices', function (Blueprint $table) {
        $table->id();
        $table->string('billno');
        $table->string('slipno');
        $table->string('customerid');
        $table->string('customername');
        $table->string('products');
        $table->integer('number');
        $table->integer('unitprice');
        $table->datetime('date');                    
        $table->timestamps();
    });
}

php artisan migrate

<?php

namespace Database\Seeders;

use App\Models\Invoice;
use Illuminate\Database\Seeder;
use Illuminate\Support\Facades\DB;

class InvoiceSeeder extends Seeder
{
    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {
        DB::table("Invoices")->insert(
            [
                [
                    'billno' => 'WS-DF502',
                    'slipno' => 'GB465',
                    'customerid' => 1,
                    'customername' => '長崎カントリーフーズ',
                    'products' => 'コーヒー 250 ml',
                    'number' => 100,
                    'unitprice' => 100,
                    'date' => '2021-01-05T00:00:00',
                    'created_at' => now(),
                    'updated_at' => now()
                ],
                [
                    'billno' => 'WS-DF502',
                    'slipno' => 'GB465',
                    'customerid' => 1,
                    'customername' => '長崎カントリーフーズ',
                    'products' => '紅茶 350 ml',
                    'number' => 300,
                    'unitprice' => 120,
                    'date' => '2021-01-05T00:00:00',
                    'created_at' => now(),
                    'updated_at' => now()
                ],
                [
                    'billno' => 'WS-DF502',
                    'slipno' => 'DK055',
                    'customerid' => 1,
                    'customername' => '長崎カントリーフーズ',
                    'products' => '炭酸飲料 (オレンジ） 350 ml',
                    'number' => 200,
                    'unitprice' => 120,
                    'date' => '2021-01-09T00:00:00',
                    'created_at' => now(),
                    'updated_at' => now()
                ],
            ]
        );
    }
}

public function run()
{
    $this->call(InvoiceSeeder::class);
}

php artisan db:seed

php artisan tinker

App\Models\Invoice::all()

・・・
（中略）
・・・
// 一覧取得（index）
public function index()
{
    return Invoice::all();
}

・・・
（中略）
・・・
class Invoice extends Model
{
    use HasFactory;

    protected $casts = [
        'unitprice' => 'integer',
        'number' => 'integer'
    ];
}

Route::apiResource('invoices','InvoiceController');

Route::middleware('auth:api')->get('/user', function (Request $request) {
    return $request->user();
});

//コメントアウトを解除
protected $namespace = 'App\\Http\\Controllers';

php artisan serve

http://127.0.0.1:8000/api/invoices

$.*

{unitprice * number}

・・・
（中略）
・・・
    "devDependencies": {
        "axios": "^0.21",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14"
    }
}

npm install

npm install @grapecity/activereports@2.1.3 @grapecity/activereports-localization@2.1.3

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
        .js('node_modules/@grapecity/activereports', 'public/js')
        .js('node_modules/@grapecity/activereports-localization', 'public/js')
        .postCss('node_modules/@grapecity/activereports/styles/ar-js-ui.css', 'public/css')
        .postCss('node_modules/@grapecity/activereports/styles/ar-js-viewer.css', 'public/css')
        .copy('resources/reports/Invoice_green_ipa.rdlx-json', 'public/reports') 
        .copy('resources/fonts/ipag.ttf', 'public/fonts'); 

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>ActiveReportsJSビューワ</title>

    <link rel="stylesheet" href="{{ asset('/css/ar-js-ui.css') }}" />
    <link rel="stylesheet" href="{{ asset('/css/ar-js-viewer.css') }}" />
    <script type="text/javascript" src="{{ asset('/js/activereports.js') }}"></script>
    <script type="text/javascript" src="{{ asset('/js/activereports-localization.js') }}"></script>
</head>

<body onload="load()">
    <div id="ARJSviewerDiv" style="height: 100vh"></div>
    <script>
        function load() {
            const viewer = new ActiveReports.Viewer('#ARJSviewerDiv', {
                language: 'ja'
            });
            // PDFエクスポートを行う場合はフォントの登録を行う
            var IPAGothic = {
                name: "IPAゴシック",
                source: "./fonts/ipag.ttf"
            };
            GC.ActiveReports.Core.FontStore.registerFonts(IPAGothic);
            viewer.open("{{ asset('/reports/Invoice_green_ipa.rdlx-json') }}");
        }
    </script>
</body>

</html>

Route::get("/viewer", function() {
	return view("viewer"); 
});

npm run dev

php artisan serve