Hướng dẫn how do i add a watermark in html pdf? - làm cách nào để thêm hình mờ trong html pdf?

Hình mờ "Dự thảo" hoặc "Bí mật" là phổ biến trên nhiều tệp PDF. May mắn thay, các tài liệu hình mờ được tạo ra động rất dễ thực hiện với API HTML đến PDF của Docraptor!

Bước 1: Tạo một số trang

Để thiết lập ví dụ này, chúng tôi sẽ buộc tạo ba trang với thuộc tính

#watermark {
  flow: static(watermarkflow);
}

@page {
   @prince-overlay {
      content: flow(watermarkflow)
   }
}

1 CSS. Điều này chỉ đơn giản là thêm một dòng phá vỡ sau mỗi

#watermark {
  flow: static(watermarkflow);
}

@page {
   @prince-overlay {
      content: flow(watermarkflow)
   }
}

2:

Page 1
Page 2
Page 3

Đối với một tài liệu có nội dung thực tế, bạn sẽ không cần những lần ngắt trang Dummmy này! Chúng tôi chỉ muốn hiển thị hình mờ làm việc trên nhiều trang.

Bước 2: Xác định hình mờ

Hãy tạo ra một hình mờ thực sự đơn giản:

PREVIEW

Bước 3: Thêm hình mờ

Đây là nơi chúng tôi để lại CSS và HTML thông thường phía sau và thể hiện sức mạnh của động cơ PDF của Docraptor:

#watermark {
  flow: static(watermarkflow);
}

@page {
   @prince-overlay {
      content: flow(watermarkflow)
   }
}

Đầu tiên, chúng tôi sử dụng thuộc tính CSS tùy chỉnh của chúng tôi để xóa khối

#watermark {
  flow: static(watermarkflow);
}

@page {
   @prince-overlay {
      content: flow(watermarkflow)
   }
}

4 khỏi luồng tài liệu. Chúng tôi đặt nó vào một luồng riêng mà chúng tôi đã đặt tên là

#watermark {
  flow: static(watermarkflow);
}

@page {
   @prince-overlay {
      content: flow(watermarkflow)
   }
}

5.

Khi xác định các luồng tùy chỉnh, HTML cho luồng phải xuất hiện trong mã HTML của bạn trước khi bạn muốn sử dụng nó. Đối với các hình mờ (và tiêu đề/chân trang), tốt nhất là đặt HTML ở đầu mã HTML của bạn (xem các ví dụ đầy đủ của chúng tôi bên dưới).before where you want to use it. For watermarks (and headers/footers), it's best to put the HTML at the top of your HTML code (see our full examples below).

Tiếp theo, chúng tôi lấy luồng mới được xác định và đưa nó vào khu vực trang

#watermark {
  flow: static(watermarkflow);
}

@page {
   @prince-overlay {
      content: flow(watermarkflow)
   }
}

6. Vùng trang đặc biệt này được phủ trên toàn bộ trang tài liệu để nó hoàn hảo cho một hình mờ. Trong ví dụ này, cùng một hình mờ được sử dụng trên mỗi trang nhưng chúng tôi cũng có thể sử dụng một CSS Propery tùy chỉnh khác, được đặt tên là các trang, để tạo các hình mờ khác nhau trên các trang khác nhau hoặc ẩn các hình mờ trên các trang giới thiệu.

Bước 4: Phong cách hình mờ

Chúng tôi đã thêm một hình mờ văn bản thực sự cơ bản, vì vậy hãy phân loại nó với một số kiểu dáng CSS khác:

#watermark {
  flow: static(watermarkflow);
  font-size: 120px;
  opacity: 0.5;
  transform: rotate(-30deg);
  text-align: center;
}

Và đó là tất cả những gì nó cần! Chỉ cần một vài dòng mã để áp dụng hình mờ PDF tùy chỉnh. Xem bên dưới để biết các ví dụ mã thế hệ PDF hoàn chỉnh bằng các ngôn ngữ khác nhau.

Mã Watermark này sẽ không hoạt động trên các tài liệu kiểm tra (có nghĩa là nó cũng sẽ không hoạt động với khóa API công khai của chúng tôi). Bạn phải có tài khoản Docraptor để sử dụng hình mờ.

Đặt một hình mờ trên tất cả các trang.

Đi đến Thiết kế> Watermark> Hình mờ tùy chỉnh ..

Khóa API hiển thị ở đây,

#watermark {
  flow: static(watermarkflow);
}

@page {
   @prince-overlay {
      content: flow(watermarkflow)
   }
}

7, thực sự hoạt động! Sử dụng nó để kiểm tra mà không tạo tài khoản. Yêu cầu duy nhất là chế độ kiểm tra phải được sử dụng (tham số

#watermark {
  flow: static(watermarkflow);
}

@page {
   @prince-overlay {
      content: flow(watermarkflow)
   }
}

8 được đặt thành

#watermark {
  flow: static(watermarkflow);
}

@page {
   @prince-overlay {
      content: flow(watermarkflow)
   }
}

9).

Chọn hình ảnh Watermark và chọn một bức tranh, hoặc chọn văn bản Watermark và nhập văn bản Watermark của bạn vào hộp văn bản ..

https:///docs

Chọn OK ..

{
  "type": "pdf",
  "document_content": "Hello World!"
}

Sử dụng API của docraptor

Dưới đây là những điều cơ bản của việc sử dụng API HTTP của Docraptor. Nó có thể dễ dàng được sử dụng trong bất kỳ ngôn ngữ lập trình nào, nhưng nếu chúng tôi không có tác nhân bản địa cho ngôn ngữ của bạn, xin vui lòng cho chúng tôi biết! Điều đó sẽ giúp chúng tôi viết các ví dụ và đại lý tốt nhất.

cat <<-'PDF_OPTIONS' > pdf_options.json
  {
    "test": false,
    "document_type": "pdf",
    "document_content": "
PREVIEW
Page 1
Page 2
Page 3
"
  }
PDF_OPTIONS

curl https:///docs \
  --fail --silent --show-error \
  --header "Content-Type:application/json" \
  --data @pdf_options.json \
  > text-based-watermark.pdf

Tải xuống

Dưới đây là tất cả các tệp bạn cần làm theo hướng dẫn này:

Để làm tài liệu, hãy gửi yêu cầu bài đăng đến URL này:

• Gửi các tham số API được mã hóa JSON (bạn sẽ cần đặt tiêu đề HTTP cho

  #watermark {
    flow: static(watermarkflow);
    font-size: 120px;
    opacity: 0.5;
    transform: rotate(-30deg);
    text-align: center;
  }

  0 là

  #watermark {
    flow: static(watermarkflow);
    font-size: 120px;
    opacity: 0.5;
    transform: rotate(-30deg);
    text-align: center;
  }

  1). Đây là những tham số duy nhất bắt buộc:
• Tạo tài liệu với Curl

Đây là một mẫu mã hoàn toàn chức năng cho hướng dẫn này:

• Khung được hỗ trợ
• .NET 4.0 trở lên
• Windows Phone 7.1 (xoài)

Phụ thuộc

Restsharp - 105.2.3 trở lên

nuget.exe install DocRaptor

Json.net - 7.0.0 trở lên

Install-Package DocRaptor

JsonsubTypes - 1.2.0 trở lên

Tạo tài liệu

Khóa API hiển thị ở đây,

#watermark {
  flow: static(watermarkflow);
}

@page {
   @prince-overlay {
      content: flow(watermarkflow)
   }
}

7, thực sự hoạt động! Sử dụng nó để kiểm tra mà không tạo tài khoản. Yêu cầu duy nhất là chế độ kiểm tra phải được sử dụng (tham số

#watermark {
  flow: static(watermarkflow);
}

@page {
   @prince-overlay {
      content: flow(watermarkflow)
   }
}

8 được đặt thành

#watermark {
  flow: static(watermarkflow);
}

@page {
   @prince-overlay {
      content: flow(watermarkflow)
   }
}

9).

using DocRaptor.Client;
using DocRaptor.Model;
using DocRaptor.Api;
using System;
using System.IO;

class Example
{
    static void Main(string[] args)
    {
        DocApi docraptor = new DocApi();
        // this key works in test mode!
        docraptor.Configuration.Username = "YOUR_API_KEY_HERE";

        try
        {
            Doc doc = new Doc(
                name: "text-based-watermark",
                test: false, // test documents are free but watermarked
                documentType: Doc.DocumentTypeEnum.Pdf,
                documentContent: System.IO.File.ReadAllText(@"text-based-watermark-content.html") 
                // documentUrl: "http://docraptor.com/examples/invoice.html", 
                // javascript: false, 
            );

            byte[] pdf = docraptor.CreateDoc(doc);
            File.WriteAllBytes("text-based-watermark.pdf", pdf);
            Console.WriteLine("Successfully created text-based-watermark.pdf!");
        } catch (DocRaptor.Client.ApiException error) {
            Console.Write(error.ErrorContent);
        }
    }
}

Tải xuống

Dưới đây là tất cả các tệp bạn cần làm theo hướng dẫn này:

Cài đặt tác nhân .NET

Với Nuget:

PREVIEW

0

Với bảng điều khiển Trình quản lý gói:

PREVIEW

1

Tạo tài liệu

Khóa API hiển thị ở đây,

#watermark {
  flow: static(watermarkflow);
}

@page {
   @prince-overlay {
      content: flow(watermarkflow)
   }
}

7, thực sự hoạt động! Sử dụng nó để kiểm tra mà không tạo tài khoản. Yêu cầu duy nhất là chế độ kiểm tra phải được sử dụng (tham số

#watermark {
  flow: static(watermarkflow);
}

@page {
   @prince-overlay {
      content: flow(watermarkflow)
   }
}

8 được đặt thành

#watermark {
  flow: static(watermarkflow);
}

@page {
   @prince-overlay {
      content: flow(watermarkflow)
   }
}

9).

PREVIEW

2

Tải xuống

Dưới đây là tất cả các tệp bạn cần làm theo hướng dẫn này:

Bạn cũng có thể tải xuống DLL trực tiếp từ GitHub.

Cài đặt tác nhân Java

Thêm gói

#watermark {
  flow: static(watermarkflow);
  font-size: 120px;
  opacity: 0.5;
  transform: rotate(-30deg);
  text-align: center;
}

5 vào dự án của bạn. Ví dụ: với maven, bạn sẽ thêm gói docraptor vào

#watermark {
  flow: static(watermarkflow);
  font-size: 120px;
  opacity: 0.5;
  transform: rotate(-30deg);
  text-align: center;
}

6 của bạn:never be used in a publicly-accessible location, instead try using our referrer-based API or a server-side agent such as PHP or Ruby.

Ví dụ JavaScript

PREVIEW

3

Tải xuống

Dưới đây là tất cả các tệp bạn cần làm theo hướng dẫn này:

Docraptor & Node.js

Cách tốt nhất để sử dụng docraptor với node.js trực tiếp thông qua API HTTP của chúng tôi. Trong ví dụ này, chúng tôi sẽ sử dụng mô -đun Axios, nhưng rõ ràng bạn có thể sử dụng bất kỳ máy khách HTTP nào bạn muốn.

Cài đặt mô -đun Axios

PREVIEW

4

Tạo tài liệu

Khóa API hiển thị ở đây,

#watermark {
  flow: static(watermarkflow);
}

@page {
   @prince-overlay {
      content: flow(watermarkflow)
   }
}

7, thực sự hoạt động! Sử dụng nó để kiểm tra mà không tạo tài khoản. Yêu cầu duy nhất là chế độ kiểm tra phải được sử dụng (tham số

#watermark {
  flow: static(watermarkflow);
}

@page {
   @prince-overlay {
      content: flow(watermarkflow)
   }
}

8 được đặt thành

#watermark {
  flow: static(watermarkflow);
}

@page {
   @prince-overlay {
      content: flow(watermarkflow)
   }
}

9).

PREVIEW

5

Tải xuống

Dưới đây là tất cả các tệp bạn cần làm theo hướng dẫn này:

Docraptor & Node.js

PREVIEW

6

Tạo tài liệu

Khóa API hiển thị ở đây,

#watermark {
  flow: static(watermarkflow);
}

@page {
   @prince-overlay {
      content: flow(watermarkflow)
   }
}

7, thực sự hoạt động! Sử dụng nó để kiểm tra mà không tạo tài khoản. Yêu cầu duy nhất là chế độ kiểm tra phải được sử dụng (tham số

#watermark {
  flow: static(watermarkflow);
}

@page {
   @prince-overlay {
      content: flow(watermarkflow)
   }
}

8 được đặt thành

#watermark {
  flow: static(watermarkflow);
}

@page {
   @prince-overlay {
      content: flow(watermarkflow)
   }
}

9).

PREVIEW

7

Tải xuống

Dưới đây là tất cả các tệp bạn cần làm theo hướng dẫn này:

Docraptor & Node.js

PREVIEW

8

Tạo tài liệu

Khóa API hiển thị ở đây,

#watermark {
  flow: static(watermarkflow);
}

@page {
   @prince-overlay {
      content: flow(watermarkflow)
   }
}

7, thực sự hoạt động! Sử dụng nó để kiểm tra mà không tạo tài khoản. Yêu cầu duy nhất là chế độ kiểm tra phải được sử dụng (tham số

#watermark {
  flow: static(watermarkflow);
}

@page {
   @prince-overlay {
      content: flow(watermarkflow)
   }
}

8 được đặt thành

#watermark {
  flow: static(watermarkflow);
}

@page {
   @prince-overlay {
      content: flow(watermarkflow)
   }
}

9).

PREVIEW

9

Tải xuống

Dưới đây là tất cả các tệp bạn cần làm theo hướng dẫn này:

Docraptor & Node.js

Cách tốt nhất để sử dụng docraptor với node.js trực tiếp thông qua API HTTP của chúng tôi. Trong ví dụ này, chúng tôi sẽ sử dụng mô -đun Axios, nhưng rõ ràng bạn có thể sử dụng bất kỳ máy khách HTTP nào bạn muốn.

Tạo tài liệu

Khóa API hiển thị ở đây,

#watermark {
  flow: static(watermarkflow);
}

@page {
   @prince-overlay {
      content: flow(watermarkflow)
   }
}

7, thực sự hoạt động! Sử dụng nó để kiểm tra mà không tạo tài khoản. Yêu cầu duy nhất là chế độ kiểm tra phải được sử dụng (tham số

#watermark {
  flow: static(watermarkflow);
}

@page {
   @prince-overlay {
      content: flow(watermarkflow)
   }
}

8 được đặt thành

#watermark {
  flow: static(watermarkflow);
}

@page {
   @prince-overlay {
      content: flow(watermarkflow)
   }
}

9).

#watermark {
  flow: static(watermarkflow);
}

@page {
   @prince-overlay {
      content: flow(watermarkflow)
   }
}

0

Tải xuống

Dưới đây là tất cả các tệp bạn cần làm theo hướng dẫn này:

Tôi có thể thêm hình mờ vào tệp pdf không?

Làm cách nào để thêm hình mờ vào PDF trong CSS?

Làm thế nào để tôi đặt một hình mờ trên tất cả các trang của PDF?