[FEATURE] - Please ask Julian for help in checking the code of the printing function.

jing12345678910 commented 1 day ago

Summary

Tasks

recording-2024-11-21-10-01-49.webm

一、feature/reports_new這個分支

二、Beta版component上到下層是：

src/pages/users/reports/financials/balance_sheet.tsx
src/components/balance_sheet_report_body/balance_sheet_report_body_new.tsx
src/components/balance_sheet_report_body/balance_sheet_list_new.tsx
src/components/balance_sheet_report_body/balance_sheet_a4_template.tsx

主要和列印有關的是在3.4

三、路徑是http://localhost:3000/users/reports/financials/balance_sheet

四、阿法版可以參考的component是 src/components/view_financial_section/view_financial_section.tsx src/components/balance_sheet_report_body/balance_sheet_report_body_all.tsx

五、問題～～～按列印之後在原本的網址有成功套用到列印的樣式但是開啟新分頁列印卻沒有成功

六、思考可能原因：可能把html2canvas拿掉嗎？就不要開啟新分頁列印在原本的網頁列印就好不確定是不是這個問題但原本是因為原本的列印有問題才加html2canvas的...

Dependencies

No response

Other Dependencies

No response

Additional Notes

No response

jing12345678910 commented 1 day ago

Julian提供的其他專案實作方法： https://github.com/CAFECA-IO/KnowledgeManagement/blob/748c5f4c8a3228d92779b776d406479264fc96d3/css_print_style.md

Julian0701 commented 1 day ago

建議的調整方向：略過轉換成圖片的步驟，直接列印網頁內容

jing12345678910 commented 1 day ago

已經略過轉換成圖片的步驟了，但是發現用 window.print(); 只會列印當下的螢幕畫面，不會列印整份報告

  const handlePrint = () => {
    setIsPrinting(true); // 啟用列印模式
    setTimeout(() => {
      window.print(); // 直接使用瀏覽器列印功能
      setIsPrinting(false); // 列印完成後退出列印模式
    }, 500); // 等待 500ms 確保渲染完成
  };

因此改用 useReactToPrint 方法

const handlePrint = useReactToPrint({
  content: () => printRef.current as HTMLElement,
  documentTitle: 'Balance Sheet Report',
  onBeforePrint: async () => {
    // eslint-disable-next-line no-console
    console.log('Before Print: isPrinting =', isPrinting);
    return Promise.resolve();
  },
  onAfterPrint: async () => {
    setIsPrinting(false);
    // eslint-disable-next-line no-console
    console.log('After Print: isPrinting =', isPrinting);
    return Promise.resolve();
  },
} as unknown as Parameters<typeof useReactToPrint>[0]);

const handlePrintClick = () => {
  setIsPrinting(true); // 啟用列印模式
  handlePrint(); // 呼叫列印
};

但是發現 handlePrintClick 觸發之後，不會再接著觸發 handlePrint，還在找原因 :fearful:

jing12345678910 commented 1 day ago

找到一個可以嘗試的方法 https://stackoverflow.com/questions/61022107/how-to-use-react-to-print-with-typescript

jing12345678910 commented 7 hours ago

改動：詳PR https://github.com/CAFECA-IO/iSunFA/pull/3312

推測還是失敗原因：useReactToPrint ref={printRef} 不會自動包含或捕捉到 isPrinting 狀態下渲染的動態內容。這是因為在 React 的工作原理中，ref 指向的 DOM 節點是在渲染完成後才確定的，而 isPrinting 的條件分支會影響渲染結果，因此當渲染分支改變時，ref 的目標內容可能已經發生變化。

jing12345678910 commented 4 hours ago

改動：詳PR https://github.com/CAFECA-IO/iSunFA/pull/3314 結果：recording-2024-11-22-12-02-01.webm

看起來有吃到列印模板那個組件（src/components/balance_sheet_report_body/balance_sheet_a4_template.tsx）但是表頭表尾沒印出來

推測原因：可能因為BalanceSheetA4Template，也有其他動態的東西影響

實驗結果：如果把動態分頁拿掉還是一樣表頭表尾沒印出來但是console printing content 會有

CAFECA-IO / iSunFA