簡體   English   中英

Rails-在瀏覽器中注釋PDF

[英]Rails - annotate PDF in browser

在我的(第一個)Rails應用程序中,我有一個名為“ Annotations”的模型; 這將需要一些通用數據以及附件(PDF)。 接下來,我需要能夠對此附件/ PDF進行實際的注釋(“注釋”),並將結果存儲在“注釋”模型上的字段中(作為JSON?)。

目前,我認為我應該在AnnotationsController中創建一個新方法“ annotate”(需要更新注釋對象)並調用一個名為“ annotate.html.erb ”的新視圖。

任何建議如何去“鐵軌方式”?

同時更新 ,我有:

模型annotation.rb

class Annotation < ApplicationRecord
    has_many :comments, dependent: :destroy
    belongs_to :documenttype
    has_attached_file :file, styles: { large: "600x600>", medium: "500x500>", thumb: "150x150#" }, default_url: "/images/:style/missing.png"

    accepts_nested_attributes_for :documenttype

    validates_attachment_content_type :file, content_type: ['image/jpeg', 'image/png', 'image/gif', 'application/pdf']

    validates :name, presence: true, uniqueness: true, length: { minimum: 10, maximum: 50 }
    validates :description, length: { minimum: 20, maximum: 500 }
    validates :documenttype, presence: true
    validates :file, presence: true
end

路線

  Rails.application.routes.draw do
      root 'dashboard#index'
      devise_for :users
      resources :users,:documenttypes, :documents
      resources :annotations do
        resources :comments
  end
  get "annotate", to: "annotations#annotate"

控制器 (AnnotationsController)

class AnnotationsController < ApplicationController
before_action :annotate, only: [:edit, :update ]

def index
    @annotations = Annotation.all
end

def show
    @annotation = Annotation.find(params[:id])
end

def new
    @annotation = Annotation.new
end

def edit
    @annotation = Annotation.find(params[:id])
end

def create
    @annotation = Annotation.new(annotation_params)

    if @annotation.save
        redirect_to @annotation
    else
        render 'new'
    end
end

def update
    @annotation = Annotation.find(params[:id])

    if @annotation.update(annotation_params)
        redirect_to @annotation
    else
        render 'edit'
    end
end

def destroy
    @annotation = Annotation.find(params[:id])
    @annotation.destroy

    redirect_to annotations_path
end

private

    def annotate
        @annotation = Annotation.find(params[:id])
    end

    def annotation_params
        params.require(:annotation).permit(:name, :description, :file, :active, :documenttype_id)
    end
end

呈現1種形式的視圖 (使用simple_form)

    <div class="container-fluid">
     <div class="row">
    <h4>Annotation</h4>
    <div class="col-md-6">
      <%= simple_form_for @annotation,  html: { class: 'form-horizontal', multipart: true },
        wrapper: :horizontal_form,
        wrapper_mappings: {
            check_boxes: :horizontal_radio_and_checkboxes,
            radio_buttons: :horizontal_radio_and_checkboxes,
            file: :horizontal_file_input,
            boolean: :horizontal_boolean
          } do |f| %>

          <%= f.error_notification %>

          <% if @annotation.file.blank? %>
            <%= f.input :file, as: :file, input_html: { accept: ('application/pdf') } %>
            <% else %>
          <% end -%>

            <%= f.input :name, placeholder: 'Enter name' %>

            <%= f.input :description, placeholder: 'Description' %>

            <%= f.association :documenttype %>

          <%= f.input :active, as: :boolean %>

          <%= f.button :submit %>
          <% unless @annotation.file.blank? %>
          <%= link_to ' Annotate', annotate_path(@annotation), :class => "btn btn-default" %>
          <% end -%>

      <% end -%>

      <p><br><%= link_to 'List' , annotations_path %></p>

    </div>

    <% unless @annotation.file.blank? %>
    <div class="col-md-6">
      <p><strong>File name: </strong><%= @annotation.file_file_name %></p>
      <iframe src="<%= @annotation.file %>" width=100% height=450px class="img-rounded"></iframe>
    </div>
    <% end %>
  </div>

  <% unless @annotation.new_record? %>
  <div class="row">
    <hr>
      <div class="col-md-6">
        <%= render @annotation.comments %>
      </div>

      <div class="col-md-6">
        <%= render 'comments/form' %>
      </div>

  </div>
  <% end -%>

</div>

另外,我創建了一個視圖調用annotate.html.erb

現在在http://localhost:3000/annotate下稱為靜態頁面; 雖然我認為它應該位於http://localhost:3000/annotations/annotate/:id -所以現在看起來像是一個路由問題。 (對我來說,路由仍然是個謎:-))

如果你想這樣做的rails方式:

您的模型應該是單數,所以: Annotation.rb

class Annotation < ApplicationRecord

end

您的控制器應稱為AnnotationsController並具有標准的CRUD方法: newcreate (用於創建新的注釋)。 editupdate以更新注釋,並destroy以銷毀您的注釋。

就像是:

class AnnotationsController < ApplicationController
  before_action :set_annotation, only: [:edit, :update, :destroy]

  def index
    @annotations = Annotation.all
  end

  def new
    @annotation = Annotation.new
  end

  def create
    @annotation = Annotation.new(annotation_params)

    if @annotation.save
      redirect_to annotations_path, notice: "annotations created"
    else
      render action: 'new'
    end
  end

  def edit
  end

  def destroy
    @annotation.destroy
    redirect_to annotations_path
  end

  def update
    if @annotation.update(annotation_params)
      redirect_to annotations_path
    else
      render action: 'edit'
    end
  end

  private

  def set_annotation
    @annotation = Annotation.find(params[:id])
  end

  def annotation_params
    params.require(:annotation).permit(:name, ...)
  end
end

您的視圖應包含在views/annotations/

由於這是您的第一個Rails應用程序,因此我建議您使用腳手架選項來構建您的應用程序,根據文檔,該應用程序是:

Rails中的腳手架是完整的模型集,該模型的數據庫遷移,用於操縱模型的控制器,用於查看和操縱數據的視圖以及用於上述每個模型的測試套件。

rails g scaffold Annotate

請參閱: http://guides.rubyonrails.org/command_line.html : http://guides.rubyonrails.org/command_line.html

找到路由, get "annotations/:id/annotate" => "annotations#annotate", as: 'annotate'

並且set_annotation方法不應為私有。

可能會有更好的路由(總是歡迎),但現在可以使用。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM