“This article has participated in the good article call order activity, click to see: back end, big front end double track submission, 20,000 yuan prize pool for you to challenge!”

📢 welcome to like: 👍 collect ⭐ message 📝 If there is any mistake please correct it, send roses, hand left fragrance!

📢 This article is written by Webmote.

📢 author’s motto: life lies in tossing about, when you do not toss about life, life will start tossing you, let us work together! 💪 💪 💪

Preface 🎏

Recently, in order to meet the requirement of an owner’s signature, the signature front end is realized by a shared component under VUE, which adopts the Canvas drawing method to generate the signature picture. The background mainly provides the rendering of the document before signature and the saving of the signature document synthesized by the document after signature.

🎏 FastReport

Report builder FastReport.net is applicable. Full-featured report library for NET Core 3, ASP.NET, MVC and Windows Forms. Using FastReport.net, you can create application-independent. NET reports.When the crystal report exploded the whole network, and now has not been seen, at present the most useful. Net platform report than FastReport, buy a genuine version is not so expensive, for enterprise customers, easy to use.

Based on these characteristics, we chose the FastReport product as the basis for the report. It has a powerful visual report designer that you can use to create and modify reports. You can connect to any database, use any of its tables, or create queries. The most critical is based on the Linux print output performance is better, in the past several versions have been a memory overflow phenomenon, the basic perfect solution. So corporate customers have priority.

🎏 Chinese garbled solution

Chinese garble is not strictly a FastReport problem, it is due to the lack of Chinese font in the cropping Linux, so you need to install Chinese font.

Here are the installation commands under the Docker container

COPY ./fonts/ /usr/share/fonts/
Copy the code

Haha, this is a lazy thing to do, just include the fonts I need in the project and copy them when publishing. Of course, there are other installation methods, which I did not try.

#Install Chinese coding support to containers
RUN  yum -y install kde-l10n-Chinese telnet && \  
             yum -y reinstall glibc-common &&\  
                  yum clean all  && \  
                    localedef -c -f UTF-8 -i zh_CN zh_CN.utf8   
             
#Sets the container encoding format
ENV LC_ALL "zh_CN.UTF-8"  
Copy the code

Of course, you must also install GDIPlus, this is the major premise, refer to the following code:

RUN yum -y install .. libc6-dev libgdiplus .. && yum clean all RUN ln -s/usr/lib64 / libdl. So. 2 / usr/lib64 / libdl. So the RUN ln -s/usr/lib64 / libgdiplus. So. 0.0.0 /usr/lib64/libgdiplus.soCopy the code

🎏 How to implement online manual signature

The idea is as follows, a picture is worth a thousand words.

Graph LR A[manual signature] -- Canvas --> B(signature image) -- background API --> C(save path) D[data source] -- Generate -->E(FastReport report) C -->E G[XML report template] -->E E --> F[Output image or PDF]

🎏 FastReport template

The datasource template file can be designed using the designer. After the design, modify the datasource slightly. The modified template file is as follows:


      
<Report ScriptLanguage="CSharp" ReportInfo.Created="02/20/2017 23:01:52" ReportInfo.Modified="09/24/2020 10:59:37" ReportInfo.CreatorVersion="2019.3.26.0">
  <ScriptText>
using System;
using System.Collections;
using System.Collections.Generic;
using System.ComponentModel;
using System.Windows.Forms;
using System.Drawing;
using System.Data;
using FastReport;
using FastReport.Data;
using FastReport.Dialog;
using FastReport.Barcode;
using FastReport.Table;
using FastReport.Utils;

namespace FastReport
{
  public class ReportScript
  {

  
  }
}</ScriptText>
  <Dictionary>
    <TableDataSource Name="t1" ReferenceName="Data.Table1" DataType="System.Int32" Enabled="true">    
      <Column Name="HOUSE_GID" DataType="System.String"/>
      <Column Name="GOODS_NAME" DataType="System.String"/>
      <Column Name="GOODS_STATUS" DataType="System.String"/>
      <Column Name="GOODS_DESCRIBE" DataType="System.String"/>
      <Column Name="CID" DataType="System.String"/>
      <Column Name="GOODS_NUMBER" DataType="System.Int16"/>
    </TableDataSource>
    <TableDataSource Name="t2" ReferenceName="Data.Table2" DataType="System.Int32" Enabled="true">     
      <Column Name="FILE_ID" DataType="System.String"/>
    </TableDataSource>
  </Dictionary>
  <ReportPage Name="Page1" Watermark.Font="Times New Roman, 60pt">
    <PageHeaderBand Name="PageHeader1" Width="718.2" Height="85.05">
      <PictureObject Name="Picture1" Left="9.45" Width="349.65" Height="66.15" Image=""/>
      <TextObject Name="txtTitle" Left="478.95" Top="18.9" Width="302.4" Height="47.25" Text=Confirmation of Receipt HorzAlign="Center" Font="Times New Roman, 20pt"/>
      <LineObject Name="Line1" Left="6.45" Top="66.15" Width="689.85"/>
    </PageHeaderBand>
    <DataBand Name="Data1" Top="338.75" Width="718.2" Height="37.8" CanGrow="true" CanShrink="true">
      <TextObject Name="Text36" Left="25.35" Width="47.25" Height="28.35" Border.Lines="All" CanGrow="true" GrowToBottom="true" Text="[Row#]" HorzAlign="Center" VertAlign="Center" Font="Times New Roman, 9pt"/>
      <TextObject Name="Text32" Left="72.6" Width="132.3" Height="28.35" Border.Lines="All" CanGrow="true" GrowToBottom="true" Text="[t1.GOODS_NAME]" HorzAlign="Center" VertAlign="Center" WordWrap="false" Font="Times New Roman, 9pt"/>
      <TextObject Name="Text111" Left="204.9" Width="132.3" Height="28.35" Border.Lines="All" CanGrow="true" GrowToBottom="true" Text="[t1.GOODS_NUMBER]" HorzAlign="Center" VertAlign="Center" WordWrap="false" Font="Times New Roman, 9pt"/>
      <TextObject Name="Text31" Left="337.2" Width="270.27" Height="28.35" Border.Lines="All" CanGrow="true" GrowToBottom="true" Text="[t1.GOODS_DESCRIBE]" VertAlign="Center" Font="Times New Roman, 9pt"/>
      <DataHeaderBand Name="DataHeader1" Top="89.05" Width="718.2" Height="245.7">
        <TextObject Name="Text18" Left="25.35" Top="217.35" Width="47.25" Height="28.35" Border.Lines="All" Text="Line" HorzAlign="Center" VertAlign="Center" Font="Times New Roman, 9pt"/>
        <TextObject Name="Text9" Left="72.6" Top="217.35" Width="132.3" Height="28.35" Border.Lines="All" Text="Goods" HorzAlign="Center" VertAlign="Center" Font="Times New Roman, 9pt"/>
        <TextObject Name="Text8" Left="337.2" Top="217.35" Width="270.27" Height="28.35" Border.Lines="All" Text="Item description" HorzAlign="Center" VertAlign="Center" Font="Times New Roman, 9pt"/>
        <TextObject Name="Text110" Left="204.9" Top="217.35" Width="132.3" Height="28.35" Border.Lines="All" Text="The number" HorzAlign="Center" VertAlign="Center" Font="Times New Roman, 9pt"/>
        <TextObject Name="lblVendorName" Left="6.45" Top="56.7" Width="689.85" Height="132.3" Text="High-tech Real Estate Development Co., Ltd. and the owner of the" Oriental Modern City "the second house to the owner handover.& # 13;& # 10;& # 13;& # 10;1. The owner has checked all the self-use parts and equipment of the property, and has mastered the correct use method of the indoor facilities.& # 13;& # 10;& # 13;& # 10;2. The owner hereby confirms that he has received the relevant items of the property:" VertAlign="Center" Font="Times New Roman, 9pt"/>
        <TextObject Name="Text113" Left="186" Top="9.45" Width="302.4" Height="47.25" Text=Confirmation of Receipt HorzAlign="Center" Font="Times New Roman, 20pt"/>
        <TextObject Name="Text1" Left="302.4" Top="85.05" Width="122.85" Height="18.9" Text="[house_handover_goods.HOUSE_GID]"  Font="Times New Roman, 14pt"/>
      </DataHeaderBand>
      <DataFooterBand Name="DataFooter1" Top="380.55" Width="718.2" Height="160.65">
        <TextObject Name="Text109" Left="6.45" Top="9.45" Width="689.85" Height="151.2" Text="& # 13;& # 10;3. All indoor facilities have passed the acceptance inspection. & # 13;& # 10;& # 13;& # 10;4. I have signed the "Preliminary Property Management Service Agreement", "Owner's Temporary Management Statute", "Fire Safety Responsibility Letter" of Oriental Modern City, and received all the materials such as "Business Manual", "Decoration Manual", "Residential Quality Guarantee certificate", "Residential Operation Manual" and have fully understood the above contents. We are willing to accept relevant services and abide by the management regulations of Oriental Modern City, and solemnly promise:& # 13;& # 10;& # 13;& # 10;I and the building user, lessee, transferee, etc. shall abide by the relevant provisions of the above provisions and bear all the responsibilities and losses caused by the violation of the above provisions. & # 13;& # 10;In the event of transfer of the property, I undertake to transfer the above information to the transferee and notify the realty Services Enterprise of the transfer in writing within 10 days from the date of signing of the transfer contract." VertAlign="Center" Font="Times New Roman, 9pt"/>
      </DataFooterBand>
    </DataBand>
    <PageFooterBand Name="PageFooter1" Top="545.2" Width="718.2" Height="132.3">
      <TextObject Name="txtPrintDate" Left="186" Top="94.5" Width="122.85" Height="18.9" Text="[Date]" Font="Times New Roman, 9pt"/>
      <TextObject Name="Text3" Left="72.6" Top="94.5" Width="85.05" Height="18.9" Text=Date of Signature: Font="Times New Roman, 9pt"/>
      <TextObject Name="Text112" Left="72.6" Top="18.9" Width="85.05" Height="18.9" Text="Signature of owner:" Font="Times New Roman, 9pt"/>
      <PictureObject Name="Picture2" Left="217.35" Top="9.45" Width="359.1" Height="75.6" ImageLocation="http://192.168.1.6/api/file/85074023914016768"/>
    </PageFooterBand>
  </ReportPage>
</Report>

Copy the code

🎏 Export THE PDF code

FastReport export PDF code is simple, as follows:

 FastReport.Report report = new FastReport.Report();
 report.RegisterData(ds);
 // Here is the download template file
 using (MemoryStream stream = Tools.DownLoad(fpxPath, context))
 {
     report.Load(stream);
 }
 report.Prepare();
 return report;
PDFExport export = new PDFExport();
export.SetReport(report);
export.Compressed = true;
export.Background = false;
export.PrintOptimized = false;
export.OpenAfterExport = false;
export.EmbeddingFonts = true;
fileName = getTempFilePath("pdf");
report.Export(export, fileName);
Copy the code

< p style = “text-transform: none; text-transform: none; text-transform: none; text-transform: none; % $

🎏 Exporting pictures

Export image code as follows, replace pdfexport:

var exportPng = new ImageExport();
exportPng.ImageFormat = ImageExportFormat.Png;
exportPng.SetReport(report);
exportPng.OpenAfterExport = false;
fileName = getTempFilePath("png");
report.Export(exportPng, fileName);
Copy the code

That’s awful. Why are you doing this to me? PDF generation is good ah, the picture why garb code, do not centos still need to install other things?

🎏 Garbled code solution

Into the Docker container, a variety of font library a fierce operation, again exported, wool did not play, is still awkward garbled. What went wrong?

Open the king of artifact search, a search, found an issue: github.com/dotnet/runt… This bug states that.NET Core 2.2 can draw good text, while.NET Core 3.0 has bugs. Is my problem similar to them?

Microsoft experts say the reason for the problem is that they have fixed the bug in 3.1:

This was broken as part of this change: dotnet/corefx@b75421a#diff-8eda13b1268284d720355f95667dea21R218 as it is missing a CharSet = Unicode parameter in the DllImport.

Then we consolidated some Graphics code in between Unix and Windows and this was fixed there as you can see on master:

Github.com/dotnet/core…

I will put up a PR to fix this on 3.0 and 3.1 and of course audit to see if there were any other regressions where we were needed to use Unicode as the Charset.

CharSet = Charset.Unicode when referring to a DLL. Ha ha ~ ~ ~ ~

 [DllImport(LibraryName, ExactSpelling = true, CharSet = CharSet.Unicode)]
 internal static extern int GdipDrawString(HandleRef graphics, string textString, int length, HandleRef font, ref RectangleF layoutRect, HandleRef stringFormat, HandleRef brush);
Copy the code

You’ve got a rough idea of the problem. It’s easy. We’ve referenced the latest package for the microservice project, and I think we should be able to do that.

<PackageReference Include="System.Drawing.Com "> <PackageReference Include="System.Drawing.Com" Version = "4.7.0" / > < PackageReference Include = "System. Text. Encoding. CodePages" Version = "4.7.1" / >Copy the code

Modify, publish, test, ha ha, done!Signature image embedding: Url embedding requires code written in the template.

//
      
 private void Picture2_BeforePrint(object sender, EventArgs e)
    {
           Picture2.ImageLocation = (string)Report.GetParameterValue("signUri"); }Copy the code

🎏 epilogue

Is a morning of time, report template editing, garbled, the programmer’s time is so back to kill. I hope this article helps you save a lot of time and get home early to spend with your family!

FastReport really works, and it’s already saved me a lot of time. If you can handle garbled code, that should not have a big pit!

Young don’t know front end fragrance, 🕺🕺🕺 mistake the back end as a treasure!

Routine summary, rational view!

Knot is what, knot is I want you to like but can not get the loneliness. 😳 😳 😳

👓 all see this, still care to point a like?

👓 all points like, still care about a collection?

Do you care about a comment when you have collected 👓?

There are a series of front-end articles, guest officer, you do not see?

👉 about the micro front (Ali QianKun) that thing – online a “micro front” forced out 2 90 post

👉 front-end project, see me here management global background initialization data, ask you sayin?

👉 Ten minutes to teach you to design easy to use component level test questions (single, multiple, fill in the blank, pictures), recommended collection

👉 Free front End Engineers – one of a series of tutorials to develop your own custom lists and custom forms

👉 Free front End Engineers – the second in a series of hands-on interfaces to develop your own custom lists and custom forms

👉 Free the front End Engineer – hand in hand guide you to develop your own custom lists and custom forms in the three tables series

👉Vue Component customization — Dynamically query rules to generate components

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Micro – service under the manual signature implementation, and eliminate Chinese garbled

Preface 🎏

🎏 FastReport

🎏 Chinese garbled solution

🎏 How to implement online manual signature

🎏 FastReport template

🎏 Export THE PDF code

🎏 Exporting pictures

🎏 Garbled code solution

🎏 epilogue

Micro – service under the manual signature implementation, and eliminate Chinese garbled

Preface 🎏

🎏 FastReport

🎏 Chinese garbled solution

🎏 How to implement online manual signature

🎏 FastReport template

🎏 Export THE PDF code

🎏 Exporting pictures

🎏 Garbled code solution

🎏 epilogue

Related Posts

ThinkPHP Apidoc automatically generates interface documentation, which is extremely useful

Docker three elements: image, container and warehouse

【Spring Cloud Gateway】 UrL-based authentication implementation