Ruby on Rails 5에서 PDF 다운로드 기능을 만들려고 할 때 후배와 1 주일 가까이 빠졌을 때의 해결책

이 문제는 Rails/wicked_pdf/wkhtmltopdf/Chart.js의 각 요소에 있어서의 버젼의 문제와, wkthmltopdf와 Chartjs로 생기는 버그와 같은 사건을 javascript측에서 보완해 주는 대책이 필요했습니다.

검색해도 문제는 여러가지로 이 기사에 쓰는 것은 해결할 수 있었던 1개의 케이스에 지나지 않습니다만, 이 조합이라면 대책할 수 있다는 사실을 비망록으로서 남겨 두려고 생각합니다.

환경

내가 잘 작동 할 수 있는지 확인한 환경은 다음과 같습니다.

CentOS
Rails 5.1.6.1

[gem]
wicked_pdf (1.4.0)
wkhtmltopdf-binary (0.12.4)
※wkhtmltopdf-binary-11을 사용하는 기사도 있습니다만 2019년 8월 시점에서는 무인의 Gem으로 OK입니다

[javascript 라이브러리]
Char.js 2.7.3

버전 정보

이것이 꽤 곡자였습니다.
원래 wkhtmltopdf는 Rails와는 독립된 제품입니다만, 낡은 버젼에서는 Chart.js의 요점인 Canvas에 대응하고 있지 않거나 합니다.
또한 Chart.js와 wkhtmltopdf를 결합하면 두 버전에 따라 에러가 발생합니다.
덧붙여서, wkhtmltopdf-binary (0.12.4)와 Char.js 1.6.0은 NG로, 그 이외는 ChartJS 1.x계인가, 2.7이후에서는 OK였습니다.

wicked_PDF로 구현

이것에 대해서는 수많은 사이트가 있으므로 할애합니다. 아래 링크를 도와주세요.
단, 아래 링크는 순수한 HTML이므로 문제 없습니다만 Rails의 View가 되면 문제가 있습니다.
절차로서
1. javascript를 밖으로 내다
2. wicked_pdf_javascript_include_tag로 포함
입니다

wkhtmltopdf+wicked_pdf+chart.js 관련 문제

몇 가지 있습니다.

View : canvas를 div로 둘러싸고 둘 다 크기를 지정하지 않으면 크기를 조정할 수 없으며 최악으로 표시되지 않음

Rails : javascript_delay에서 일정 시간 기다려 두지 않으면 그래프 드로잉이 시간에 맞지 않고 아무것도 표시되지 않음

View : canvas를 div로 둘러싸고 둘 다 크기를 지정합니다.

즉 이런 일
둘러싸는 DIV 태그와 둘러싸인 canvas 태그는 같은 사이즈로 사이에는 padding도 margin도 들어가지 않게 하는 것이 상투 수단과 같습니다.
빠지기 쉬운 체크 포인트라고 생각합니다

sample.html

<div style="width:500px; height:500px;">
  <canvas id="myChart1" style="width:500px; height:500px;"></canvas>
</div>

Rails : javascript_delay에서 일정 시간 그래프 그리기를 기다립니다.

이것은 애니메이션 하고 있는 그래프에서는 특히 시비아인 문제인 것처럼, PDF 출력 대상만을 나눌 수 있는 경우는 JS를 따로 해 animation: false로 해 두는 것도 예방책으로서 좋을지도 모르겠네요
그것을하지 않아도 아래와 같이 조금 기다려 주면 문제 없습니다.

sample_controller.rb

    def pdf_output
      respond_to do |format|
        format.html
        format.pdf do
          pdf = render_to_string(
            pdf: 'pdffile',
            encoding: 'UTF-8',
            template: 'sample_pdf.html',
            layout: 'sample.pdf.erb',
            javascript_delay: 1000　# <-ここの時間を調整する
          )
          send_data(pdf, filename: 'file.pdf')
        end
      end
    end

wkhtmltopdf가 Chart.js에 제공하지 않는 것을 제공합니다.

wkhtmltopdf의 결함을 자바 스크립트로 보완합시다는 것입니다.
참조 -> h tps : // s t c ゔ ぇ rf ぉ w. 코 m / 쿠에 s 치온 s / 42561036 / wkhtml 및 pdf f dae s - t-run r-cha rt-js-2-5-0-g 등 ph / 57454387 # 57454387

위의 링크에 쓰여있는 중 필요한 것은 다음과 같습니다.
이것을 외부 파일로 만들고 wicked_pdf_javascript_include_tag에 포함시킵니다.

sample.js

// wkhtmltopdf 0.12.5 crash fix.
// https://github.com/wkhtmltopdf/wkhtmltopdf/issues/3242#issuecomment-518099192
'use strict';
(function(setLineDash) {
    CanvasRenderingContext2D.prototype.setLineDash = function() {
        if(!arguments[0].length){
            arguments[0] = [1,0];
        }
        // Now, call the original method
        return setLineDash.apply(this, arguments);
    };
})(CanvasRenderingContext2D.prototype.setLineDash);
Function.prototype.bind = Function.prototype.bind || function (thisp) {
    var fn = this;
    return function () {
        return fn.apply(thisp, arguments);
    };
};

이것으로 완료.
모든 그래프가 제대로 표시되었습니다

참고로

그래도 움직이지 않을 때 등은 아래 링크를 참고해보십시오.

h tp // 아야케탄. 하테나 bぉg. 코m/엔트리/2014/02/02/211557

h tp // w w. f를 아 bw.んふぉ / 엔트리 / 2017/02/21 / 포스트-8240

이상.

그 외 Asset에 포함되지 않는 화상을 표시할 때는 wicked_pdf_image_tag가 아닌 보통의 image_tag를 사용하는 등등, 조금 막혔습니다만 비교적 간단하게 대답이 발견되므로 할애합니다

우선 할 수 없었다고 하지 않아서 안심하고 있습니다