Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Local photos are not displayed in pdf #315

Open
ValyaBabenkov opened this issue Sep 17, 2024 · 4 comments
Open

Local photos are not displayed in pdf #315

ValyaBabenkov opened this issue Sep 17, 2024 · 4 comments

Comments

@ValyaBabenkov
Copy link

Good afternoon, I am writing a pdf export of data including photos taken via mobile device.
When exporting data the pictures are missing, I have been puzzling for 2 days.
The code is as follows:

path Images:
"file:///var/mobile/Containers/Data/Application/F6EBD9B9-05AF-49C9-9FDD-E333A5051689/Documents/993A1CC8-35CD-45D5-870C-A823A7E2A635.jpg"

const renderHtmlPhotos = (photos: string[]) => {
  let html = '<div class="photos">\n';
  for (let i = 0; i < photos.length; i += 2) {
    const photo1 = photos[i]
      ? `<img src="${photos[i]}" width="600px" height="600px"/>`
      : `<img src="${photos[i]}" width="600px" height="600px"/>`;
    const photo2 = photos[i + 1]
      ? photos[i + 1]
        ? `<img src="${photos[i + 1]}" width="600px" height="600px"/>`
        : `<img src="${photos[i + 1]}" width="600px" height="600px"/>`
      : '';
    html += `<div class="photo-pair">${photo1}${photo2}</div>\n`;
  }
  return html;
};


export const itemsToHTML = (items: {floors: IFloorState[]}) => {
  const {floors} = items;
  return `
  <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <style>
                table {
                    width: 100%;
                    border-collapse: collapse;
                }
                th, td {
                    border: 1px solid black;
                    padding: 8px;
                    text-align: left;
                }
                th {
                    background-color: gray;
                    color: white;
                    font-weight: bold;
                }
                .photos {
                    display: flex;
                    flex-direction: column;
                }
                .photo-pair {
                    display: flex;
                    gap: 10px;
                }
                .photo-pair img {
                    width: 100px;
                    height: 100px;
                }
            </style>
        </head>
        <body>
            <table>
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Local</th>
                    <th>Room</th>
                    <th>Desc</th>
                    <th>Pri</th>
                    <th>Photos</th>
                </tr>
            </thead>
            <tbody id="tableBody">
            ${floors
              .map(({title: floorTitle, rooms}) =>
                rooms
                  .map(({title: roomTitle, problems}) =>
                    problems.map(
                      ({id, title: problemTitle, priority, photos}) =>
                        `<tr key=${id}>
                          <td>${id}</td>
                          <td>${floorTitle}</td>
                          <td>${roomTitle}</td>
                          <td>${problemTitle}</td>
                          <td>${priority}</td>
                          <td>${renderHtmlPhotos(photos)}</td>
                        </tr>`,
                    ),
                  )
                  .flat(),
              )
              .flat()}
            </tbody>
            </table>
        </body>
        </html>`;
};

Libs:
"react-native": "0.74.5",
"react-native-html-to-pdf": "^0.12.0",
@surojitutahtechlab
Copy link

surojitutahtechlab commented Sep 17, 2024 •
edited
Loading

const logoUri = Image.resolveAssetSource(
require("../../assets/images/logo.png")
).uri;

Image tag should be imported from React-Native

@bumpingChris
Copy link

bumpingChris commented Oct 22, 2024 •
edited
Loading

I am able to get images stored in the local Documents directory on iOS to show by changing the following code in the RNHTLtoPDF.m file (lines 174-184) and writing the HTML string to a file called "html2pdf.html" saved to the Documents/htmlDirectory/ folder:


    NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES);
    NSString *documentsDirectory = [paths objectAtIndex:0];
    NSURL *baseURL = [NSURL fileURLWithPath:documentsDirectory];
    NSURL *baseURL2 = [baseURL URLByAppendingPathComponent: @"htmlDirectory"];
    NSURL *baseURL3 = [baseURL2 URLByAppendingPathComponent: @"html2pdf.html"];
 
    dispatch_async(dispatch_get_main_queue(), ^{
        [_webView loadFileURL:baseURL3 allowingReadAccessToURL:baseURL];
    });

If someone can show how this could be done in Android as well....

@lucas-samuel01
Copy link

lucas-samuel01 commented Oct 31, 2024 •
edited
Loading

Reference in new i

const logoUri = Image.resolveAssetSource(
require("../../assets/images/logo.jpg")
).uri;

Image tag should be imported from React-Native
That worked for me, in Ios and android but I had to use JPG image, png just not work I don't know why

@zoobibackups
Copy link

URI file:///var/mobile/Containers/Data/Application/2A435227-4285-45E3-A6C7-40742A487D34/Documents/CamScanner/Documents/CamScan001.pdf
LOG PDF Loaded: {"height": undefined, "numberOfPages": 1, "width": undefined}
LOG URI file:///var/mobile/Containers/Data/Application/2A435227-4285-45E3-A6C7-40742A487D34/Documents/CamScanner/Documents/CamScan001.pdf
Same issue local photos not show

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@bumpingChris @ValyaBabenkov @lucas-samuel01 @zoobibackups @surojitutahtechlab